@avento-space/ts-ui 1.2.6 → 1.2.8

package/dist/{chunk-EDV6KYRZ.js → chunk-AZSJNOZV.js}

@@ -1,4 +1,4 @@
-import { UElement, buttonStyles, inputStyles, boxStyles, listStyles, textStyles, stackStyles, gridStyles, overlayStyles, fieldStyles, checkboxStyles, selectStyles, linkStyles, containerStyles, dialogStyles, tooltipStyles, textareaStyles, radioStyles, switchStyles, labelStyles, treeStyles, tableStyles, breadcrumbStyles, tabsStyles, visuallyHiddenStyles, presenceStyles, animateKeyframes, modalStyles, drawerStyles, popoverStyles, dropdownStyles, accordionStyles, comboboxStyles, calendarStyles, dataTableStyles, commandPaletteStyles, toastStyles, contextMenuStyles, sortableStyles, formStyles, badgeStyles, cardStyles } from './chunk-XN2J666Y.js';
+import { UElement, buttonStyles, inputStyles, boxStyles, listStyles, textStyles, stackStyles, gridStyles, overlayStyles, fieldStyles, checkboxStyles, selectStyles, linkStyles, containerStyles, dialogStyles, tooltipStyles, textareaStyles, radioStyles, switchStyles, labelStyles, treeStyles, tableStyles, breadcrumbStyles, tabsStyles, visuallyHiddenStyles, presenceStyles, animateKeyframes, modalStyles, drawerStyles, popoverStyles, dropdownStyles, accordionStyles, comboboxStyles, calendarStyles, dataTableStyles, commandPaletteStyles, toastStyles, contextMenuStyles, sortableStyles, formStyles, badgeStyles, cardStyles } from './chunk-UVAJNPHY.js';
 import { signal, effect } from './chunk-Q5RCPPCF.js';
 
 // src/components/button.wc.ts
@@ -9,7 +9,7 @@ var UButton = class extends UElement {
     this._size = "md";
     this._disabled = false;
     this._buttonType = "button";
-    this._root.innerHTML = `<style>${buttonStyles}</style><button part="button"><slot></slot></button>`;
+    this._root.innerHTML = `<style>@layer components {${buttonStyles}}</style><button part="button"><slot></slot></button>`;
   }
   static get observedAttributes() {
     return ["variant", "size", "disabled", "type", "class"];
@@ -98,7 +98,7 @@ var UInput = class extends UElement {
     this._readonly = false;
     this._inputType = "text";
     this._inputName = "";
-    this._root.innerHTML = `<style>${inputStyles}</style><div part="wrapper" class="input-wrapper"><input part="input" /></div>`;
+    this._root.innerHTML = `<style>@layer components {${inputStyles}}</style><div part="wrapper" class="input-wrapper"><input part="input" /></div>`;
   }
   static get observedAttributes() {
     return ["placeholder", "disabled", "readonly", "type", "name", "class"];
@@ -466,19 +466,9 @@ var UPortal = class extends HTMLElement {
     super();
     this._container = null;
     this._observer = null;
-    this.style.display = "none";
-  }
-  static get observedAttributes() {
-    return ["target"];
-  }
-  get target() {
-    return this.getAttribute("target");
-  }
-  set target(val) {
-    if (val) this.setAttribute("target", val);
-    else this.removeAttribute("target");
   }
   connectedCallback() {
+    this.style.display = "none";
     this._open();
   }
   disconnectedCallback() {
@@ -941,6 +931,7 @@ var UDismissableLayer = class extends UElement {
   connectedCallback() {
     super.connectedCallback();
     if (this._enabled) this._enable();
+    this._sync();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -953,12 +944,20 @@ var UDismissableLayer = class extends UElement {
       if (this._enabled) this._enable();
       else this._disable();
     }
+    if (name === "class") this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="layer"]');
+    el.className = this.className;
   }
   _enable() {
     this._disable();
     this._handleOutsideClick = (e) => {
-      const composed = e.composedPath();
-      if (!composed.includes(this)) {
+      const composed = e.composedPath ? e.composedPath() : e.path || [];
+      const root = this.getRootNode();
+      const host = root instanceof ShadowRoot ? root.host : null;
+      const isInsideHost = host ? composed.includes(host) : false;
+      if (!composed.includes(this) && !isInsideHost) {
         this.dispatchEvent(new CustomEvent("u-dismiss", { bubbles: false, composed: true }));
       }
     };
@@ -1550,10 +1549,16 @@ var UHoverable = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "disabled") this._disabled = newVal !== null;
+    this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="hoverable"]');
+    el.className = this.className;
   }
   _mount() {
     const el = this._root.querySelector('[part="hoverable"]');
@@ -1632,6 +1637,15 @@ var UFocusTrap = class extends UElement {
 };
 
 // src/core/position.ts
+function computeHostRelativePosition(hostRect, trigger, popup, options = {}) {
+  const result = computePosition(trigger, popup, options);
+  return {
+    ...result,
+    top: result.top - hostRect.top,
+    left: result.left - hostRect.left,
+    position: "absolute"
+  };
+}
 var SAFE_MARGIN = 8;
 function isMobileViewport() {
   return window.innerWidth < 640;
@@ -1713,24 +1727,35 @@ function computePosition(trigger, popup, options = {}) {
     }
   }
   const finalBase = currentPlacement.split("-")[0];
+  const finalAlign = currentPlacement.split("-")[1];
+  if (finalBase === "top") {
+    maxHeight = trigger.top - offset - margin;
+  } else if (finalBase === "bottom") {
+    maxHeight = vh - (trigger.bottom + offset) - margin;
+  } else if (finalBase === "left" || finalBase === "right") {
+    maxHeight = vh - margin * 2;
+  }
+  const actualHeight = maxHeight && maxHeight > 0 ? Math.min(popup.height, maxHeight) : popup.height;
+  if (finalBase === "top") {
+    top = trigger.top - actualHeight - offset;
+  } else if (finalBase === "left" || finalBase === "right") {
+    if (finalAlign === "end") top = trigger.bottom - actualHeight;
+    else if (!finalAlign) top = trigger.top + (trigger.height - actualHeight) / 2;
+  }
+  let width;
   const isVertical = finalBase === "top" || finalBase === "bottom";
   if (isMobile && isVertical) {
     left = margin;
-    const maxWidth = vw - margin * 2;
-    if (popup.width > maxWidth) ;
+    width = vw - margin * 2;
   }
   left = Math.max(margin, Math.min(left, vw - popup.width - margin));
-  top = Math.max(margin, Math.min(top, vh - popup.height - margin));
-  if (finalBase === "top") {
-    maxHeight = top - margin;
-  } else if (finalBase === "bottom") {
-    maxHeight = vh - top - margin;
-  }
+  top = Math.max(margin, Math.min(top, vh - actualHeight - margin));
   return {
     top: Math.round(top),
     left: Math.round(left),
     placement: currentPlacement,
     maxHeight: maxHeight && maxHeight > 0 ? maxHeight : void 0,
+    width,
     overflowX: Math.max(0, left + popup.width + margin - vw),
     overflowY: Math.max(0, top + popup.height + margin - vh)
   };
@@ -1908,6 +1933,8 @@ var UDialogRoot = class extends UElement {
   _sync() {
     this.setAttribute("role", "dialog");
     this.setAttribute("aria-modal", String(this._modal));
+    const dialogRoot = this._root.querySelector('[part="dialog-root"]');
+    dialogRoot.className = this.className;
     if (!this._synced) {
       this._synced = true;
       this._updateOpenState();
@@ -1984,6 +2011,38 @@ var UDialogRoot = class extends UElement {
   }
 };
 
+// src/core/portal-float.ts
+var originals = /* @__PURE__ */ new WeakMap();
+function portalFloat(el) {
+  if (originals.has(el)) return;
+  const root = el.getRootNode();
+  let styleClone = null;
+  if (root instanceof ShadowRoot) {
+    const styleEl = root.querySelector("style");
+    if (styleEl) {
+      styleClone = styleEl.cloneNode(true);
+      el.appendChild(styleClone);
+    }
+  }
+  originals.set(el, { parent: el.parentNode, nextSibling: el.nextSibling, styleClone });
+  document.body.appendChild(el);
+}
+function unportalFloat(el) {
+  const saved = originals.get(el);
+  if (!saved) return;
+  originals.delete(el);
+  if (saved.styleClone && saved.styleClone.parentNode === el) {
+    el.removeChild(saved.styleClone);
+  }
+  if (saved.parent) {
+    if (saved.nextSibling) {
+      saved.parent.insertBefore(el, saved.nextSibling);
+    } else {
+      saved.parent.appendChild(el);
+    }
+  }
+}
+
 // src/components/tooltip-root.wc.ts
 var UTooltipRoot = class extends UElement {
   constructor() {
@@ -1994,7 +2053,13 @@ var UTooltipRoot = class extends UElement {
     this._disabled = false;
     this._showTimeout = null;
     this._hideTimeout = null;
+    this._tipEl = null;
+    this._triggerEl = null;
+    this._arrowEl = null;
     this._root.innerHTML = `<style>${tooltipStyles}</style><div part="trigger" class="tooltip-trigger" style="display:inline-flex"><slot></slot></div><div part="tooltip" class="tooltip" role="tooltip" hidden><!-- @deprecated tooltip-content \u2192 use part="content" --><div part="tooltip-content content" class="tooltip-content"></div><div part="arrow" class="tooltip-arrow"></div></div>`;
+    this._tipEl = this._root.querySelector('[part="tooltip"]');
+    this._triggerEl = this._root.querySelector('[part="trigger"]');
+    this._arrowEl = this._root.querySelector('[part="arrow"]');
   }
   static get observedAttributes() {
     return ["content", "placement", "delay", "disabled", "class"];
@@ -2021,6 +2086,12 @@ var UTooltipRoot = class extends UElement {
     super.connectedCallback();
     this._sync();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._showTimeout) clearTimeout(this._showTimeout);
+    if (this._hideTimeout) clearTimeout(this._hideTimeout);
+    if (this._tipEl) unportalFloat(this._tipEl);
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     switch (name) {
@@ -2049,8 +2120,9 @@ var UTooltipRoot = class extends UElement {
     if (this._disabled || !this._content) return;
     if (this._hideTimeout) clearTimeout(this._hideTimeout);
     this._showTimeout = setTimeout(() => {
-      const tip = this._root.querySelector('[part="tooltip"]');
+      const tip = this._tipEl;
       tip.removeAttribute("hidden");
+      portalFloat(tip);
       requestAnimationFrame(() => this._position());
       this.dispatchEvent(new CustomEvent("u-tooltip-show", { bubbles: true, composed: true }));
     }, this._delay);
@@ -2058,14 +2130,15 @@ var UTooltipRoot = class extends UElement {
   hide() {
     if (this._showTimeout) clearTimeout(this._showTimeout);
     this._hideTimeout = setTimeout(() => {
-      const tip = this._root.querySelector('[part="tooltip"]');
+      const tip = this._tipEl;
       tip.setAttribute("hidden", "");
+      unportalFloat(tip);
       this.dispatchEvent(new CustomEvent("u-tooltip-hide", { bubbles: true, composed: true }));
     }, 50);
   }
   _position() {
-    const tip = this._root.querySelector('[part="tooltip"]');
-    const trigger = this._root.querySelector('[part="trigger"]');
+    const tip = this._tipEl;
+    const trigger = this._triggerEl;
     if (tip.hidden) return;
     const result = computePosition(
       trigger.getBoundingClientRect(),
@@ -2075,12 +2148,12 @@ var UTooltipRoot = class extends UElement {
     tip.style.position = "fixed";
     tip.style.top = `${result.top}px`;
     tip.style.left = `${result.left}px`;
-    const arrow = this._root.querySelector('[part="arrow"]');
+    const arrow = this._arrowEl;
     const base = result.placement.split("-")[0];
     arrow.className = `tooltip-arrow arrow-${base}`;
   }
   _mount() {
-    const trigger = this._root.querySelector('[part="trigger"]');
+    const trigger = this._triggerEl;
     trigger.addEventListener("pointerenter", () => this.show());
     trigger.addEventListener("pointerleave", () => this.hide());
     trigger.addEventListener("focusin", () => this.show());
@@ -3605,7 +3678,7 @@ var UModal = class extends UElement {
     this._closeOnOverlay = true;
     this._previousActive = null;
     this._unlockScroll = null;
-    this._root.innerHTML = `<style>${modalStyles}</style>
+    this._root.innerHTML = `<style>@layer components {${modalStyles}}</style>
 <div part="backdrop" class="modal-backdrop" hidden></div>
 <div part="modal" class="modal" role="dialog" aria-modal="true" hidden>
   <div part="modal-wrapper" class="modal-wrapper modal-md">
@@ -3711,16 +3784,18 @@ var UModal = class extends UElement {
       this._previousActive = document.activeElement;
       backdrop.removeAttribute("hidden");
       modal.removeAttribute("hidden");
-      this._unlockScroll = lockScroll();
+      if (!this._unlockScroll) {
+        this._unlockScroll = lockScroll();
+      }
       this._updateSize();
       this._focusFirst();
     } else {
-      backdrop.setAttribute("hidden", "");
-      modal.setAttribute("hidden", "");
       if (this._unlockScroll) {
         this._unlockScroll();
         this._unlockScroll = null;
       }
+      backdrop.setAttribute("hidden", "");
+      modal.setAttribute("hidden", "");
       if (this._previousActive && this._previousActive.focus) {
         this._previousActive.focus();
         this._previousActive = null;
@@ -3905,18 +3980,24 @@ var UDrawer = class extends UElement {
       backdrop.removeAttribute("hidden");
       drawer.removeAttribute("hidden");
       this._applyDrawerSize(content);
-      this._unlockScroll = lockScroll();
-      void drawer.offsetHeight;
-      drawer.classList.add("drawer-open");
+      if (!this._unlockScroll) {
+        this._unlockScroll = lockScroll();
+      }
+      drawer.classList.remove("drawer-open");
+      void content.offsetHeight;
+      requestAnimationFrame(() => {
+        if (!this._open) return;
+        drawer.classList.add("drawer-open");
+      });
       this._focusFirst();
     } else {
-      drawer.classList.remove("drawer-open");
-      backdrop.setAttribute("hidden", "");
-      drawer.setAttribute("hidden", "");
       if (this._unlockScroll) {
         this._unlockScroll();
         this._unlockScroll = null;
       }
+      drawer.classList.remove("drawer-open");
+      backdrop.setAttribute("hidden", "");
+      drawer.setAttribute("hidden", "");
       if (this._previousActive && this._previousActive.focus) {
         this._previousActive.focus();
         this._previousActive = null;
@@ -3981,10 +4062,13 @@ var UPopover = class extends UElement {
     this._offset = 8;
     this._closeOnEscape = true;
     this._closeOnOutsideClick = true;
+    this._popoverEl = null;
+    this._triggerEl = null;
+    this._arrowEl = null;
     this._handleOutsideClick = (e) => {
       if (!this._open || !this._closeOnOutsideClick) return;
       const path = e.composedPath();
-      if (!path.includes(this)) {
+      if (!path.includes(this) && (!this._popoverEl || !path.includes(this._popoverEl))) {
         this.closePopover();
       }
     };
@@ -4003,6 +4087,9 @@ var UPopover = class extends UElement {
     <slot></slot>
   </div>
 </div>`;
+    this._popoverEl = this._root.querySelector('[part="popover"]');
+    this._triggerEl = this._root.querySelector('[part="trigger"]');
+    this._arrowEl = this._root.querySelector('[part="arrow"]');
   }
   static get observedAttributes() {
     return ["open", "placement", "offset", "close-on-escape", "close-on-outside-click", "class"];
@@ -4037,6 +4124,12 @@ var UPopover = class extends UElement {
     super.connectedCallback();
     this._sync();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("pointerdown", this._handleOutsideClick);
+    document.removeEventListener("keydown", this._handleEscape);
+    if (this._popoverEl) unportalFloat(this._popoverEl);
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     switch (name) {
@@ -4062,29 +4155,46 @@ var UPopover = class extends UElement {
     }
   }
   _sync() {
-    const popoverEl = this._root.querySelector('[part="popover"]');
+    const popoverEl = this._popoverEl;
     popoverEl.className = `popover ${this.className}`.trim();
   }
   _updateOpenState() {
-    const popover = this._root.querySelector('[part="popover"]');
+    const popover = this._popoverEl;
+    const contentEl = popover.querySelector(".popover-content");
     if (this._open) {
+      const slot = contentEl.querySelector("slot:not([name])");
+      if (slot) {
+        const assigned = slot.assignedNodes({ flatten: true });
+        slot.remove();
+        for (const node of assigned) {
+          contentEl.appendChild(node.cloneNode(true));
+        }
+      }
       popover.removeAttribute("hidden");
+      portalFloat(popover);
       requestAnimationFrame(() => this._position());
       this.dispatchEvent(new CustomEvent("u-popover-open", { bubbles: true, composed: true }));
     } else {
       popover.setAttribute("hidden", "");
+      unportalFloat(popover);
+      const existingSlot = contentEl.querySelector("slot:not([name])");
+      if (!existingSlot) {
+        while (contentEl.firstChild) contentEl.removeChild(contentEl.firstChild);
+        const newSlot = document.createElement("slot");
+        contentEl.appendChild(newSlot);
+      }
       this.dispatchEvent(new CustomEvent("u-popover-close", { bubbles: true, composed: true }));
     }
   }
   _position() {
-    const popover = this._root.querySelector('[part="popover"]');
-    const trigger = this._root.querySelector('[part="trigger"]');
+    const popover = this._popoverEl;
+    const trigger = this._triggerEl;
     const result = computePosition(
       trigger.getBoundingClientRect(),
       { width: popover.offsetWidth || 0, height: popover.offsetHeight || 0 },
       { placement: this._placement, offset: this._offset, flip: true }
     );
-    const arrow = this._root.querySelector('[part="arrow"]');
+    const arrow = this._arrowEl;
     const resultBase = result.placement.split("-")[0];
     arrow.className = `popover-arrow arrow-${resultBase}`;
     popover.style.position = "fixed";
@@ -4092,7 +4202,7 @@ var UPopover = class extends UElement {
     popover.style.left = `${result.left}px`;
   }
   _mount() {
-    const triggerSlot = this._root.querySelector('[part="trigger"]');
+    const triggerSlot = this._triggerEl;
     triggerSlot.addEventListener("click", () => this.toggle());
     document.addEventListener("pointerdown", this._handleOutsideClick);
     document.addEventListener("keydown", this._handleEscape);
@@ -4157,7 +4267,7 @@ var UDropdown = class extends UElement {
     this._handleOutsideClick = (e) => {
       if (!this._open) return;
       const path = e.composedPath();
-      if (!path.includes(this)) {
+      if (!path.includes(this) && (!this._menuEl || !path.includes(this._menuEl))) {
         this.closeDropdown();
       }
     };
@@ -4216,6 +4326,12 @@ var UDropdown = class extends UElement {
     this._sync();
     this._renderItems();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("pointerdown", this._handleOutsideClick);
+    document.removeEventListener("keydown", this._handleEscape);
+    if (this._menuEl) unportalFloat(this._menuEl);
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     switch (name) {
@@ -4309,34 +4425,19 @@ var UDropdown = class extends UElement {
   _updateOpenState() {
     if (this._open) {
       this._menuEl.removeAttribute("hidden");
+      portalFloat(this._menuEl);
       this._menuEl.focus({ preventScroll: true });
       this._activeIndex = -1;
       requestAnimationFrame(() => this._position());
     } else {
       this._menuEl.setAttribute("hidden", "");
+      unportalFloat(this._menuEl);
       this._activeIndex = -1;
     }
   }
   _position() {
     const trigRect = this._triggerEl.getBoundingClientRect();
     this._menuEl.style.minWidth = `${Math.min(trigRect.width, window.innerWidth - 16)}px`;
-    const isMobile = window.innerWidth < 640;
-    if (isMobile) {
-      const margin = 8;
-      this._menuEl.style.position = "fixed";
-      this._menuEl.style.left = `${margin}px`;
-      this._menuEl.style.width = `${window.innerWidth - margin * 2}px`;
-      const spaceBelow = window.innerHeight - trigRect.bottom;
-      const spaceAbove = trigRect.top;
-      if (spaceBelow > 200 || spaceBelow >= spaceAbove) {
-        this._menuEl.style.top = `${trigRect.bottom + 4}px`;
-        this._menuEl.style.maxHeight = `${Math.min(spaceBelow - 8, 320)}px`;
-      } else {
-        this._menuEl.style.top = `${Math.max(8, trigRect.top - 8 - 320)}px`;
-        this._menuEl.style.maxHeight = `${Math.min(spaceAbove - 8, 320)}px`;
-      }
-      return;
-    }
     const result = computePosition(
       trigRect,
       { width: this._menuEl.offsetWidth || trigRect.width, height: this._menuEl.offsetHeight || 0 },
@@ -4345,7 +4446,7 @@ var UDropdown = class extends UElement {
     this._menuEl.style.position = "fixed";
     this._menuEl.style.top = `${result.top}px`;
     this._menuEl.style.left = `${result.left}px`;
-    this._menuEl.style.width = "";
+    this._menuEl.style.width = result.width ? `${result.width}px` : "";
     if (result.maxHeight) this._menuEl.style.maxHeight = `${result.maxHeight}px`;
   }
   _getSelectableItems() {
@@ -4428,6 +4529,7 @@ var UAccordion = class extends UElement {
     super.connectedCallback();
     this._sync();
     this._initItems();
+    this._syncItems();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
@@ -4442,7 +4544,7 @@ var UAccordion = class extends UElement {
   _initItems() {
     const items = this.querySelectorAll(":scope > u-accordion-item");
     items.forEach((item) => {
-      const key = item.getAttribute("data-value") || "";
+      const key = item.getAttribute("value") || "";
       if (item.hasAttribute("open")) {
         this._value.add(key);
       }
@@ -4471,11 +4573,13 @@ var UAccordion = class extends UElement {
   _syncItems() {
     const items = this.querySelectorAll(":scope > u-accordion-item");
     items.forEach((item) => {
-      const key = item.getAttribute("data-value") || "";
-      const content = item.querySelector('[part="accordion-content"]');
+      const key = item.getAttribute("value") || "";
+      const content = item.shadowRoot?.querySelector('[part="accordion-content"]');
       if (this._value.has(key)) {
         item.setAttribute("open", "");
-        if (content) content.style.height = `${content.scrollHeight}px`;
+        if (content) {
+          content.style.height = `${content.scrollHeight}px`;
+        }
       } else {
         item.removeAttribute("open");
         if (content) content.style.height = "0";
@@ -4484,11 +4588,21 @@ var UAccordion = class extends UElement {
   }
   _mount() {
     this.addEventListener("click", (e) => {
-      const header = e.target.closest('[part="accordion-header"]');
+      const path = typeof e.composedPath === "function" ? e.composedPath() : e.path || [];
+      if (!Array.isArray(path)) return;
+      const header = path.find(
+        (el) => el instanceof HTMLElement && el.getAttribute("part") === "accordion-header"
+      );
       if (!header) return;
-      const item = header.closest("u-accordion-item");
+      let item = header.closest("u-accordion-item");
+      if (!item && header.getRootNode() instanceof ShadowRoot) {
+        const host = header.getRootNode().host;
+        if (host instanceof HTMLElement && host.tagName.toLowerCase() === "u-accordion-item") {
+          item = host;
+        }
+      }
       if (!item) return;
-      const key = item.getAttribute("data-value") || "";
+      const key = item.getAttribute("value") || "";
       this.toggle(key);
     });
   }
@@ -4548,7 +4662,6 @@ var UAccordionItem = class extends UElement {
 };
 
 // src/components/combobox.wc.ts
-var MOBILE_BREAKPOINT = 640;
 var UCombobox = class extends UElement {
   constructor() {
     super();
@@ -4667,33 +4780,19 @@ var UCombobox = class extends UElement {
   _position() {
     const listbox = this._root.querySelector('[part="listbox"]');
     const wrapper = this._root.querySelector('[part="input-wrapper"]');
+    const hostRect = this.getBoundingClientRect();
     const rect = wrapper.getBoundingClientRect();
-    const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
-    if (isMobile) {
-      const margin = 8;
-      listbox.style.position = "fixed";
-      listbox.style.left = `${margin}px`;
-      listbox.style.width = `${window.innerWidth - margin * 2}px`;
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      if (spaceBelow > 200 || spaceBelow >= spaceAbove) {
-        listbox.style.top = `${rect.bottom + 2}px`;
-        listbox.style.maxHeight = `${Math.min(spaceBelow - 8, 240)}px`;
-      } else {
-        listbox.style.top = `${Math.max(8, rect.top - 242)}px`;
-        listbox.style.maxHeight = `${Math.min(spaceAbove - 8, 240)}px`;
-      }
-      return;
-    }
-    const result = computePosition(
+    const result = computeHostRelativePosition(
+      hostRect,
       rect,
       { width: listbox.offsetWidth || rect.width, height: listbox.offsetHeight || 240 },
       { placement: "bottom-start", offset: 2, flip: true }
     );
-    listbox.style.position = "fixed";
+    listbox.style.position = "absolute";
     listbox.style.top = `${result.top}px`;
     listbox.style.left = `${result.left}px`;
-    listbox.style.width = `${rect.width}px`;
+    listbox.style.width = result.width ? `${result.width}px` : `${rect.width}px`;
+    if (result.maxHeight) listbox.style.maxHeight = `${result.maxHeight}px`;
   }
   _filterOptions(query) {
     if (!this._filterable) return;
@@ -5600,10 +5699,13 @@ var UContextMenu = class extends UElement {
     this._items = [];
     this._open = false;
     this._selectedIndex = -1;
+    this._menuEl = null;
+    this._itemsContainer = null;
     this._handleOutsideClick = (e) => {
       if (!this._open) return;
       const path = e.composedPath();
-      if (!path.includes(this)) {
+      const menu = this._menuEl;
+      if (!path.includes(this) && (!menu || !path.includes(menu))) {
         this._closeMenu();
       }
     };
@@ -5612,6 +5714,8 @@ var UContextMenu = class extends UElement {
 <div part="menu" class="cm-menu" role="menu" hidden>
   <div part="items" class="cm-items"></div>
 </div>`;
+    this._menuEl = this._root.querySelector('[part="menu"]');
+    this._itemsContainer = this._root.querySelector('[part="items"]');
   }
   static get observedAttributes() {
     return ["class"];
@@ -5629,6 +5733,11 @@ var UContextMenu = class extends UElement {
     this._renderItems();
     this._sync();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("pointerdown", this._handleOutsideClick);
+    if (this._menuEl) unportalFloat(this._menuEl);
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "class") this._sync();
@@ -5645,7 +5754,7 @@ var UContextMenu = class extends UElement {
     if (parsed.length > 0) this._items = parsed;
   }
   _renderItems() {
-    const container = this._root.querySelector('[part="items"]');
+    const container = this._itemsContainer;
     container.innerHTML = "";
     this._items.forEach((item, i) => {
       if (item.divider) {
@@ -5678,23 +5787,26 @@ var UContextMenu = class extends UElement {
     });
   }
   _sync() {
-    const menu = this._root.querySelector('[part="menu"]');
+    const menu = this._menuEl;
     menu.className = `cm-menu ${this.className}`.trim();
   }
   _openMenu(x, y) {
-    const menu = this._root.querySelector('[part="menu"]');
-    const itemsContainer = this._root.querySelector('[part="items"]');
+    const menu = this._menuEl;
+    const itemsContainer = this._itemsContainer;
     menu.style.animation = "none";
     menu.removeAttribute("hidden");
     void menu.offsetHeight;
+    portalFloat(menu);
     const trigger = new DOMRect(x, y, 0, 0);
     const result = computePosition(
       trigger,
       { width: menu.offsetWidth || 0, height: menu.offsetHeight || 0 },
       { placement: "bottom-start", margin: 8, flip: true }
     );
+    menu.style.position = "fixed";
     menu.style.left = `${result.left}px`;
     menu.style.top = `${result.top}px`;
+    if (result.width) menu.style.width = `${result.width}px`;
     menu.style.maxHeight = `${result.maxHeight ?? 320}px`;
     itemsContainer.style.maxHeight = `${(result.maxHeight ?? 320) - 16}px`;
     void menu.offsetHeight;
@@ -5713,8 +5825,9 @@ var UContextMenu = class extends UElement {
   }
   _closeMenu() {
     if (!this._open) return;
-    const menu = this._root.querySelector('[part="menu"]');
+    const menu = this._menuEl;
     menu.setAttribute("hidden", "");
+    unportalFloat(menu);
     this._open = false;
     this._selectedIndex = -1;
     this.dispatchEvent(
@@ -5725,7 +5838,7 @@ var UContextMenu = class extends UElement {
     );
   }
   _focusFirst() {
-    const btns = this._root.querySelectorAll(".cm-item:not([disabled])");
+    const btns = this._itemsContainer.querySelectorAll(".cm-item:not([disabled])");
     if (btns.length > 0) {
       btns[0].focus();
     }
@@ -5739,8 +5852,8 @@ var UContextMenu = class extends UElement {
       this._renderItems();
       this._openMenu(ce.clientX, ce.clientY);
     });
-    const menu = this._root.querySelector('[part="menu"]');
-    const itemsContainer = this._root.querySelector('[part="items"]');
+    const menu = this._menuEl;
+    const itemsContainer = this._itemsContainer;
     menu.addEventListener("click", (e) => {
       const btn = e.target.closest(".cm-item");
       if (!btn || btn.hasAttribute("disabled")) return;
@@ -6051,7 +6164,7 @@ var UBadge = class extends UElement {
     this._size = "md";
     this._dot = false;
     this._pill = true;
-    this._root.innerHTML = `<style>${badgeStyles}</style><span part="badge" class="badge badge-default badge-md badge-pill"><slot></slot></span>`;
+    this._root.innerHTML = `<style>@layer components {${badgeStyles}}</style><span part="badge" class="badge badge-default badge-md badge-pill"><slot></slot></span>`;
   }
   static get observedAttributes() {
     return ["variant", "size", "dot", "pill", "class"];
@@ -6126,7 +6239,7 @@ var UCard = class extends UElement {
     this._variant = "default";
     this._padding = "md";
     this._hoverable = false;
-    this._root.innerHTML = `<style>${cardStyles}</style>
+    this._root.innerHTML = `<style>@layer components {${cardStyles}}</style>
 <div part="card" class="card card-default card-padding-md">
   <div part="image" class="card-image card-image-top">
     <slot name="image"></slot>
@@ -6205,5 +6318,5 @@ var UCard = class extends UElement {
 };
 
 export { UAccordion, UAccordionItem, UAnimate, UBadge, UBox, UBreadcrumb, UButton, UCalendar, UCard, UCheckbox, UCollection, UCombobox, UCommandPalette, UContainer, UContextMenu, UDataTable, UDialogRoot, UDismissableLayer, UDrawer, UDropdown, UField, UFocusManager, UFocusScope, UFocusTrap, UForm, UGrid, UHStack, UHoverable, UInput, UKeyboardNavigation, ULabel, ULink, UList, ULiveRegion, UModal, UOverlay, UPopover, UPopper, UPortal, UPresence, UPressable, URadio, URadioGroup, URouterView, USelect, USlot, USortable, USpacer, UStack, USwitch, UTable, UTabs, UText, UTextarea, UToast, UTooltipRoot, UTransition, UTree, UVirtualList, UVisuallyHidden, createControlledInput, setPortalRoot };
-//# sourceMappingURL=chunk-EDV6KYRZ.js.map
-//# sourceMappingURL=chunk-EDV6KYRZ.js.map
+//# sourceMappingURL=chunk-AZSJNOZV.js.map
+//# sourceMappingURL=chunk-AZSJNOZV.js.map