@waggylabs/yumekit 0.4.2-beta.27 → 0.4.2-beta.30

package/dist/components/y-date/y-date.d.ts

@@ -130,6 +130,7 @@ export class YumeDate extends HTMLElement {
      * @param {HTMLElement} picker
      */
     _handleRangeTypeahead(text: string, picker: HTMLElement): void;
+    _positionPopup(popup: any, trigger: any): void;
     /**
      * Parse partial user input and return an object with whatever date parts
      * could be extracted based on the format string.  Returns null if nothing

package/dist/components/y-date.js

@@ -3827,6 +3827,36 @@ class YumeDate extends HTMLElement {
         this.render();
     }
 
+    _positionPopup(popup, trigger) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const popupWidth = popup.offsetWidth;
+        const popupHeight = popup.offsetHeight;
+        const gap = 4;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        // Vertical: prefer below; flip above when not enough space below and more space above
+        const spaceBelow = vh - triggerRect.bottom - gap;
+        const spaceAbove = triggerRect.top - gap;
+        if (spaceBelow >= popupHeight || spaceBelow >= spaceAbove) {
+            popup.style.top = `calc(100% + ${gap}px)`;
+            popup.style.bottom = "auto";
+        } else {
+            popup.style.top = "auto";
+            popup.style.bottom = `calc(100% + ${gap}px)`;
+        }
+
+        // Horizontal: prefer left-aligned; flip to right-aligned when popup overflows viewport
+        const spaceRight = vw - triggerRect.left;
+        if (spaceRight >= popupWidth) {
+            popup.style.left = "0";
+            popup.style.right = "auto";
+        } else {
+            popup.style.left = "auto";
+            popup.style.right = "0";
+        }
+    }
+
     /**
      * Parse partial user input and return an object with whatever date parts
      * could be extracted based on the format string.  Returns null if nothing
@@ -4117,7 +4147,10 @@ class YumeDate extends HTMLElement {
         if (!popup || !trigger) return;
         popup.hidden = !open;
         trigger.setAttribute("aria-expanded", String(open));
-        if (open) this._selectedParts.clear();
+        if (open) {
+            this._selectedParts.clear();
+            this._positionPopup(popup, trigger);
+        }
     }
 
     _setupMediaQuery() {

package/dist/components/y-theme.js

@@ -167,6 +167,7 @@ class YumeTheme extends HTMLElement {
                 font-family: var(--font-family-body, sans-serif);
                 color: var(--base-content--, inherit);
                 font-weight: var(--font-weight-body, 400);
+                background: var(--base-background-app, transparent);
             }`;
         this.shadowRoot.appendChild(baseStyle);
 

package/dist/index.js

@@ -6362,6 +6362,36 @@ class YumeDate extends HTMLElement {
         this.render();
     }
 
+    _positionPopup(popup, trigger) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const popupWidth = popup.offsetWidth;
+        const popupHeight = popup.offsetHeight;
+        const gap = 4;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        // Vertical: prefer below; flip above when not enough space below and more space above
+        const spaceBelow = vh - triggerRect.bottom - gap;
+        const spaceAbove = triggerRect.top - gap;
+        if (spaceBelow >= popupHeight || spaceBelow >= spaceAbove) {
+            popup.style.top = `calc(100% + ${gap}px)`;
+            popup.style.bottom = "auto";
+        } else {
+            popup.style.top = "auto";
+            popup.style.bottom = `calc(100% + ${gap}px)`;
+        }
+
+        // Horizontal: prefer left-aligned; flip to right-aligned when popup overflows viewport
+        const spaceRight = vw - triggerRect.left;
+        if (spaceRight >= popupWidth) {
+            popup.style.left = "0";
+            popup.style.right = "auto";
+        } else {
+            popup.style.left = "auto";
+            popup.style.right = "0";
+        }
+    }
+
     /**
      * Parse partial user input and return an object with whatever date parts
      * could be extracted based on the format string.  Returns null if nothing
@@ -6652,7 +6682,10 @@ class YumeDate extends HTMLElement {
         if (!popup || !trigger) return;
         popup.hidden = !open;
         trigger.setAttribute("aria-expanded", String(open));
-        if (open) this._selectedParts.clear();
+        if (open) {
+            this._selectedParts.clear();
+            this._positionPopup(popup, trigger);
+        }
     }
 
     _setupMediaQuery() {
@@ -11547,6 +11580,7 @@ class YumeTheme extends HTMLElement {
                 font-family: var(--font-family-body, sans-serif);
                 color: var(--base-content--, inherit);
                 font-weight: var(--font-weight-body, 400);
+                background: var(--base-background-app, transparent);
             }`;
         this.shadowRoot.appendChild(baseStyle);