@reliability-design/web 1.4.3 → 1.4.4

package/dist/components/rel-range-picker/rel-range-picker.ts

@@ -52,6 +52,8 @@ export class RelRangePicker extends LitElement {
   @state() private hoverDate: string | null = null;
 
   @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  @query(".popover") private popoverEl?: HTMLDivElement;
+  @query(".backdrop") private backdropEl?: HTMLDivElement;
 
   static styles = css`
     :host {
@@ -113,6 +115,17 @@ export class RelRangePicker extends LitElement {
 
     /* ── Popover shell ── */
     .popover {
+      /* Reset native [popover] UA styles first (the shell is promoted to
+         the top layer so transformed / overflow:hidden ancestors — e.g. a
+         centered rel-modal panel — can't hijack or clip it). While in the
+         top layer, JS overrides the anchored position below with inline
+         fixed coordinates; the CSS anchoring is the no-Popover-API
+         fallback. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
@@ -137,6 +150,13 @@ export class RelRangePicker extends LitElement {
     .backdrop {
       position: fixed;
       inset: 0;
+      /* Reset native [popover] UA styles — the backdrop is promoted to the
+         top layer right before the panel so the panel stacks above it. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      border: none;
       z-index: 2147483646;
       background: rgba(0,0,0,0.4);
     }
@@ -448,17 +468,111 @@ export class RelRangePicker extends LitElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleGlobalKeydown);
+    window.removeEventListener("resize", this.onReposition);
+    window.removeEventListener("scroll", this.onReposition, true);
+    this.hideTopLayer();
   }
 
-  updated() {
+  updated(changed: Map<string, unknown>) {
     this.style.width = this.width;
     this.style.minWidth = this.minWidth;
     this.style.maxWidth = this.maxWidth;
     this.style.height = this.height;
     this.style.minHeight = this.minHeight;
     this.style.maxHeight = this.maxHeight;
+
+    // `open` is a public reflected property (consumers may set it directly,
+    // not only via the trigger), so top-layer promotion syncs here rather
+    // than inside openPopover/cancelPopover.
+    if (changed.has("open")) {
+      if (this.open) {
+        this.showTopLayer();
+        window.addEventListener("resize", this.onReposition);
+        window.addEventListener("scroll", this.onReposition, true);
+      } else {
+        window.removeEventListener("resize", this.onReposition);
+        window.removeEventListener("scroll", this.onReposition, true);
+        this.hideTopLayer();
+      }
+    }
+  }
+
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, and its overflow:hidden clips position:absolute ones —
+   * either way the picker shell breaks inside a modal. Promoting shell
+   * (and popup-mode backdrop) to the browser top layer sidesteps both —
+   * same fix as rel-popover / rel-autocomplete / rel-select. `manual`
+   * keeps outside-click and Escape handling under this component's own
+   * control. While in the top layer the CSS anchoring (absolute, below
+   * the trigger) is meaningless, so popover mode gets inline fixed
+   * coordinates from updatePopoverPosition(). */
+
+  private showTopLayer() {
+    // Backdrop first — later-shown popovers stack above earlier ones.
+    for (const el of [this.mode === "popup" ? this.backdropEl : undefined, this.popoverEl]) {
+      if (!el || typeof el.showPopover !== "function") continue;
+      try {
+        if (!el.matches(":popover-open")) el.showPopover();
+      } catch {
+        /* older engines / detached element — CSS fallback applies */
+      }
+    }
+    if (this.mode === "popover") {
+      requestAnimationFrame(() => this.updatePopoverPosition());
+    }
   }
 
+  private hideTopLayer() {
+    for (const el of [this.popoverEl, this.backdropEl]) {
+      if (!el || typeof el.hidePopover !== "function") continue;
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+      } catch {
+        /* already hidden or unsupported — nothing to do */
+      }
+    }
+    if (this.popoverEl) {
+      this.popoverEl.style.position = "";
+      this.popoverEl.style.top = "";
+      this.popoverEl.style.left = "";
+    }
+  }
+
+  private onReposition = () => {
+    if (this.open && this.mode === "popover") this.updatePopoverPosition();
+  };
+
+  private updatePopoverPosition = () => {
+    const panel = this.popoverEl;
+    if (!panel || !this.open || this.mode !== "popover") return;
+
+    // Host rect anchors both trigger variants (default button and icon).
+    const t = this.getBoundingClientRect();
+    const c = panel.getBoundingClientRect();
+
+    let top = t.bottom + 4;
+    if (top + c.height > window.innerHeight - 8) {
+      top = Math.max(8, t.top - c.height - 4);
+    }
+    let left = t.left;
+    if (left + c.width > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - c.width - 8);
+    }
+
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the shell away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    panel.style.position = "fixed";
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+    const applied = panel.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  };
+
   // ── Open / close ──
 
   private handleClickOutside = (e: MouseEvent) => {
@@ -916,11 +1030,12 @@ export class RelRangePicker extends LitElement {
           `}
 
       ${isPopup && this.open
-        ? html`<div part="overlay" class="backdrop" @click=${this.cancelPopover}></div>`
+        ? html`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>`
         : nothing}
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        popover="manual"
         role="dialog"
         aria-label="Select date range"
       >

package/dist/components/rel-select/README.md

@@ -119,3 +119,4 @@ None exposed.
 - Typed text that doesn't exactly match (case-insensitive) any option reverts to the last committed `selected` value on blur, Escape, or Tab
 - The ghost-text suggestion shows the remainder of the first option whose name starts with the typed text (case-insensitive); it has no effect on filtering, which matches substrings anywhere in an option
 - Dropdown panel is positioned via `position: fixed` and flips above the trigger if there isn't enough viewport space below
+- The open listbox is promoted to the browser **top layer** (native Popover API, `popover="manual"`), so it renders correctly inside transformed / `overflow: hidden` containers — a centered `rel-modal`, a bottom `rel-drawer`. Engines without the Popover API fall back to `position: fixed` with a measure-and-cancel correction for transformed ancestors