@waggylabs/yumekit 0.4.1-beta.71 → 0.4.1-beta.72

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

@@ -4,6 +4,7 @@ export class YumeDate extends HTMLElement {
     _internals: ElementInternals;
     _onDocumentClick(e: any): void;
     _suppressBlurApply: boolean;
+    _selectedParts: Set<any>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;

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

@@ -1,9 +1,8 @@
 declare namespace _default {
-    export let title: string;
-    export let tags: string[];
-    export { docsParams as parameters };
-    export let decorators: ((story: any) => string)[];
-    export namespace argTypes {
+    let title: string;
+    let tags: string[];
+    let decorators: ((story: any) => string)[];
+    namespace argTypes {
         namespace mode {
             let control: string;
             let options: string[];
@@ -142,8 +141,22 @@ declare namespace _default {
             }
             export { table_8 as table };
         }
+        namespace showSeconds {
+            let control_11: string;
+            export { control_11 as control };
+            let description_11: string;
+            export { description_11 as description };
+            export namespace table_9 {
+                export namespace defaultValue_9 {
+                    let summary_9: string;
+                    export { summary_9 as summary };
+                }
+                export { defaultValue_9 as defaultValue };
+            }
+            export { table_9 as table };
+        }
     }
-    export namespace args {
+    namespace args {
         let mode_1: string;
         export { mode_1 as mode };
         let size_1: string;
@@ -164,8 +177,10 @@ declare namespace _default {
         export { showTime_1 as showTime };
         let showMinutes_1: boolean;
         export { showMinutes_1 as showMinutes };
+        let showSeconds_1: boolean;
+        export { showSeconds_1 as showSeconds };
     }
-    export function render(args: any): string;
+    function render(args: any): string;
 }
 export default _default;
 /** Default single-date input. */
@@ -231,13 +246,3 @@ export namespace Invalid {
     }
     export { args_7 as args };
 }
-/** Interactive playground. */
-export const Playground: {};
-declare namespace docsParams {
-    namespace docs {
-        namespace story {
-            let inline: boolean;
-            let height: string;
-        }
-    }
-}

package/dist/components/y-date.js

@@ -1116,8 +1116,10 @@ class YumeSelect extends HTMLElement {
             }
 
             .dropdown {
-                position: fixed;
+                position: absolute;
                 z-index: var(--component-select-z-index, 6000);
+                left: 0;
+                right: 0;
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
@@ -1506,18 +1508,14 @@ class YumeSelect extends HTMLElement {
     _positionDropdown() {
         const rect = this.selectContainer.getBoundingClientRect();
         const gap = 4;
-
-        this.dropdown.style.left = `${rect.left}px`;
-        this.dropdown.style.width = `${rect.width}px`;
-
-        const spaceBelow = window.innerHeight - rect.bottom - gap;
         const maxH = 200;
+        const spaceBelow = window.innerHeight - rect.bottom - gap;
 
         if (spaceBelow >= maxH || spaceBelow >= rect.top) {
-            this.dropdown.style.top = `${rect.bottom + gap}px`;
+            this.dropdown.style.top = `${this.selectContainer.offsetHeight + gap}px`;
             this.dropdown.style.bottom = "auto";
         } else {
-            this.dropdown.style.bottom = `${window.innerHeight - rect.top + gap}px`;
+            this.dropdown.style.bottom = `${this.selectContainer.offsetHeight + gap}px`;
             this.dropdown.style.top = "auto";
         }
     }
@@ -1930,7 +1928,9 @@ class YumeDatepicker extends HTMLElement {
                     // Apply the year delta relative to what the right panel currently shows
                     const rightVd = this._viewDateForSide("right");
                     const yearDiff = targetYear - rightVd.getFullYear();
-                    this._viewDate.setFullYear(this._viewDate.getFullYear() + yearDiff);
+                    this._viewDate.setFullYear(
+                        this._viewDate.getFullYear() + yearDiff,
+                    );
                 } else {
                     this._viewDate.setFullYear(targetYear);
                 }
@@ -1971,7 +1971,7 @@ class YumeDatepicker extends HTMLElement {
                 if (side === "right") this._endTime.h = h;
                 else this._startTime.h = h;
                 this._applyTimesToDates();
-                this._emitChange();
+                this._emitChange("hour");
                 this.render();
             });
         });
@@ -1983,7 +1983,7 @@ class YumeDatepicker extends HTMLElement {
                 if (side === "right") this._endTime.m = m;
                 else this._startTime.m = m;
                 this._applyTimesToDates();
-                this._emitChange();
+                this._emitChange("minute");
                 this.render();
             });
         });
@@ -1995,7 +1995,7 @@ class YumeDatepicker extends HTMLElement {
                 if (side === "right") this._endTime.s = s;
                 else this._startTime.s = s;
                 this._applyTimesToDates();
-                this._emitChange();
+                this._emitChange("second");
                 this.render();
             });
         });
@@ -2055,6 +2055,26 @@ class YumeDatepicker extends HTMLElement {
     _buildHeader(vd, side, isRange) {
         const year = vd.getFullYear();
         const month = vd.getMonth();
+
+        // Month and year picker modes: simple label, no selects or nav
+        if (!this.showDays) {
+            let label;
+            if (this.showMonths) {
+                label = String(year);
+            } else {
+                const minY = this._minDate()?.getFullYear() ?? year - 10;
+                const maxY = this._maxDate()?.getFullYear() ?? year + 10;
+                label = `${minY} – ${maxY}`;
+            }
+            return `
+                <div class="cal-header">
+                    <div class="header-selects">
+                        <span class="header-label">${label}</span>
+                    </div>
+                </div>
+            `;
+        }
+
         const showPrev = !isRange || side === "left";
         const showNext = !isRange || side === "right";
 
@@ -2194,6 +2214,11 @@ class YumeDatepicker extends HTMLElement {
             .month-sel { min-width: 120px; }
             .year-sel  { min-width: 80px;  }
 
+            .header-label {
+                font-weight: 600;
+                white-space: nowrap;
+            }
+
             /* ---- Day grid ---- */
 
             .day-grid {
@@ -2400,7 +2425,7 @@ class YumeDatepicker extends HTMLElement {
         `;
     }
 
-    _emitChange() {
+    _emitChange(source) {
         this._suppressParse = true;
         const value = this._buildValueString();
         if (value !== this.getAttribute("value")) {
@@ -2413,6 +2438,7 @@ class YumeDatepicker extends HTMLElement {
                 composed: true,
                 detail: {
                     value,
+                    source,
                     startDate: this._startDate
                         ? new Date(this._startDate)
                         : null,
@@ -2463,7 +2489,7 @@ class YumeDatepicker extends HTMLElement {
             this._startDate = date;
         }
         this._applyTimesToDates();
-        this._emitChange();
+        this._emitChange("day");
         this.render();
     }
 
@@ -2620,6 +2646,7 @@ class YumeDate extends HTMLElement {
         this.attachShadow({ mode: "open" });
         this._onDocumentClick = this._onDocumentClick.bind(this);
         this._suppressBlurApply = false;
+        this._selectedParts = new Set();
     }
 
     connectedCallback() {
@@ -3034,7 +3061,9 @@ class YumeDate extends HTMLElement {
         });
 
         // Picker date selection
+        // Guard: ignore composed change events from child y-selects (month/year dropdowns)
         picker.addEventListener("change", (e) => {
+            if (e.composedPath()[0] !== picker) return;
             this._suppressBlurApply = true;
             const { value, formatted } = e.detail;
             this.setAttribute("value", value);
@@ -3044,7 +3073,18 @@ class YumeDate extends HTMLElement {
 
             this._updateClearBtn();
 
-            if (this.mode === "single" && value) this._setOpen(false);
+            // Auto-close once all available parts have been selected
+            if (this.mode === "single" && value) {
+                const src = e.detail.source;
+                if (src) this._selectedParts.add(src);
+                const required = ["day"];
+                if (picker.showTime) required.push("hour");
+                if (picker.showMinutes) required.push("minute");
+                if (picker.showSeconds) required.push("second");
+                if (required.every((p) => this._selectedParts.has(p))) {
+                    this._setOpen(false);
+                }
+            }
 
             this.dispatchEvent(
                 new CustomEvent("change", {
@@ -3229,6 +3269,7 @@ class YumeDate extends HTMLElement {
         if (!popup || !trigger) return;
         popup.hidden = !open;
         trigger.setAttribute("aria-expanded", String(open));
+        if (open) this._selectedParts.clear();
     }
 
     _syncPickerValue() {
@@ -3286,15 +3327,15 @@ class YumeDate extends HTMLElement {
         const fmt = this.format;
 
         const tokens = [
-            { token: "YYYY", key: "year",   re: "(\\d{4})" },
-            { token: "MM",   key: "month",  re: "(\\d{1,2})" },
-            { token: "DD",   key: "day",    re: "(\\d{1,2})" },
-            { token: "HH",   key: "hour24", re: "(\\d{1,2})" },
-            { token: "hh",   key: "hour12", re: "(\\d{1,2})" },
-            { token: "mm",   key: "minute", re: "(\\d{1,2})" },
-            { token: "ss",   key: "second", re: "(\\d{1,2})" },
-            { token: "A",    key: "ampm",   re: "(AM|PM)" },
-            { token: "a",    key: "ampm",   re: "(am|pm)" },
+            { token: "YYYY", key: "year", re: "(\\d{4})" },
+            { token: "MM", key: "month", re: "(\\d{1,2})" },
+            { token: "DD", key: "day", re: "(\\d{1,2})" },
+            { token: "HH", key: "hour24", re: "(\\d{1,2})" },
+            { token: "hh", key: "hour12", re: "(\\d{1,2})" },
+            { token: "mm", key: "minute", re: "(\\d{1,2})" },
+            { token: "ss", key: "second", re: "(\\d{1,2})" },
+            { token: "A", key: "ampm", re: "(AM|PM)" },
+            { token: "a", key: "ampm", re: "(am|pm)" },
         ];
 
         // Replace each token with a placeholder, then escape literal chars,
@@ -3316,11 +3357,15 @@ class YumeDate extends HTMLElement {
         if (!match) return null;
 
         const parts = {};
-        order.forEach((t, i) => { parts[t.key] = match[i + 1]; });
+        order.forEach((t, i) => {
+            parts[t.key] = match[i + 1];
+        });
 
-        const year   = parts.year   ? parseInt(parts.year)       : new Date().getFullYear();
-        const month  = parts.month  ? parseInt(parts.month) - 1  : 0;
-        const day    = parts.day    ? parseInt(parts.day)        : 1;
+        const year = parts.year
+            ? parseInt(parts.year)
+            : new Date().getFullYear();
+        const month = parts.month ? parseInt(parts.month) - 1 : 0;
+        const day = parts.day ? parseInt(parts.day) : 1;
 
         let hour = 0;
         if (parts.hour24 !== undefined) {

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

@@ -72,7 +72,7 @@ export class YumeDatepicker extends HTMLElement {
     _buildTimeColumn(side: any): string;
     _buildValueString(): any;
     _buildYearGrid(vd: any): string;
-    _emitChange(): void;
+    _emitChange(source: any): void;
     _suppressParse: boolean;
     _formatDate(date: any): string;
     _handleDayClick(date: any): void;

package/dist/components/y-datepicker/y-datepicker.stories.d.ts

@@ -1,8 +1,8 @@
 declare namespace _default {
-    export let title: string;
-    export let tags: string[];
-    export { docsParams as parameters };
-    export namespace argTypes {
+    let title: string;
+    let tags: string[];
+    let decorators: ((story: any) => string)[];
+    namespace argTypes {
         namespace mode {
             let control: string;
             let options: string[];
@@ -146,7 +146,7 @@ declare namespace _default {
             export { table_8 as table };
         }
     }
-    export namespace args {
+    namespace args {
         let mode_1: string;
         export { mode_1 as mode };
         let color_1: string;
@@ -166,7 +166,7 @@ declare namespace _default {
         let showDays_1: boolean;
         export { showDays_1 as showDays };
     }
-    export function render(args: any): string;
+    function render(args: any): string;
 }
 export default _default;
 /** Default single-date picker. */
@@ -266,11 +266,3 @@ export namespace CustomFormat {
 }
 /** Interactive playground. */
 export const Playground: {};
-declare namespace docsParams {
-    namespace docs {
-        namespace story {
-            let inline: boolean;
-            let height: string;
-        }
-    }
-}

package/dist/components/y-datepicker.js

@@ -1116,8 +1116,10 @@ class YumeSelect extends HTMLElement {
             }
 
             .dropdown {
-                position: fixed;
+                position: absolute;
                 z-index: var(--component-select-z-index, 6000);
+                left: 0;
+                right: 0;
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
@@ -1506,18 +1508,14 @@ class YumeSelect extends HTMLElement {
     _positionDropdown() {
         const rect = this.selectContainer.getBoundingClientRect();
         const gap = 4;
-
-        this.dropdown.style.left = `${rect.left}px`;
-        this.dropdown.style.width = `${rect.width}px`;
-
-        const spaceBelow = window.innerHeight - rect.bottom - gap;
         const maxH = 200;
+        const spaceBelow = window.innerHeight - rect.bottom - gap;
 
         if (spaceBelow >= maxH || spaceBelow >= rect.top) {
-            this.dropdown.style.top = `${rect.bottom + gap}px`;
+            this.dropdown.style.top = `${this.selectContainer.offsetHeight + gap}px`;
             this.dropdown.style.bottom = "auto";
         } else {
-            this.dropdown.style.bottom = `${window.innerHeight - rect.top + gap}px`;
+            this.dropdown.style.bottom = `${this.selectContainer.offsetHeight + gap}px`;
             this.dropdown.style.top = "auto";
         }
     }
@@ -1930,7 +1928,9 @@ class YumeDatepicker extends HTMLElement {
                     // Apply the year delta relative to what the right panel currently shows
                     const rightVd = this._viewDateForSide("right");
                     const yearDiff = targetYear - rightVd.getFullYear();
-                    this._viewDate.setFullYear(this._viewDate.getFullYear() + yearDiff);
+                    this._viewDate.setFullYear(
+                        this._viewDate.getFullYear() + yearDiff,
+                    );
                 } else {
                     this._viewDate.setFullYear(targetYear);
                 }
@@ -1971,7 +1971,7 @@ class YumeDatepicker extends HTMLElement {
                 if (side === "right") this._endTime.h = h;
                 else this._startTime.h = h;
                 this._applyTimesToDates();
-                this._emitChange();
+                this._emitChange("hour");
                 this.render();
             });
         });
@@ -1983,7 +1983,7 @@ class YumeDatepicker extends HTMLElement {
                 if (side === "right") this._endTime.m = m;
                 else this._startTime.m = m;
                 this._applyTimesToDates();
-                this._emitChange();
+                this._emitChange("minute");
                 this.render();
             });
         });
@@ -1995,7 +1995,7 @@ class YumeDatepicker extends HTMLElement {
                 if (side === "right") this._endTime.s = s;
                 else this._startTime.s = s;
                 this._applyTimesToDates();
-                this._emitChange();
+                this._emitChange("second");
                 this.render();
             });
         });
@@ -2055,6 +2055,26 @@ class YumeDatepicker extends HTMLElement {
     _buildHeader(vd, side, isRange) {
         const year = vd.getFullYear();
         const month = vd.getMonth();
+
+        // Month and year picker modes: simple label, no selects or nav
+        if (!this.showDays) {
+            let label;
+            if (this.showMonths) {
+                label = String(year);
+            } else {
+                const minY = this._minDate()?.getFullYear() ?? year - 10;
+                const maxY = this._maxDate()?.getFullYear() ?? year + 10;
+                label = `${minY} – ${maxY}`;
+            }
+            return `
+                <div class="cal-header">
+                    <div class="header-selects">
+                        <span class="header-label">${label}</span>
+                    </div>
+                </div>
+            `;
+        }
+
         const showPrev = !isRange || side === "left";
         const showNext = !isRange || side === "right";
 
@@ -2194,6 +2214,11 @@ class YumeDatepicker extends HTMLElement {
             .month-sel { min-width: 120px; }
             .year-sel  { min-width: 80px;  }
 
+            .header-label {
+                font-weight: 600;
+                white-space: nowrap;
+            }
+
             /* ---- Day grid ---- */
 
             .day-grid {
@@ -2400,7 +2425,7 @@ class YumeDatepicker extends HTMLElement {
         `;
     }
 
-    _emitChange() {
+    _emitChange(source) {
         this._suppressParse = true;
         const value = this._buildValueString();
         if (value !== this.getAttribute("value")) {
@@ -2413,6 +2438,7 @@ class YumeDatepicker extends HTMLElement {
                 composed: true,
                 detail: {
                     value,
+                    source,
                     startDate: this._startDate
                         ? new Date(this._startDate)
                         : null,
@@ -2463,7 +2489,7 @@ class YumeDatepicker extends HTMLElement {
             this._startDate = date;
         }
         this._applyTimesToDates();
-        this._emitChange();
+        this._emitChange("day");
         this.render();
     }
 

package/dist/components/y-select/y-select.stories.d.ts

@@ -1,8 +1,8 @@
 declare namespace _default {
-    export let title: string;
-    export let tags: string[];
-    export { docsParams as parameters };
-    export namespace argTypes {
+    let title: string;
+    let tags: string[];
+    let decorators: ((story: any) => string)[];
+    namespace argTypes {
         namespace options {
             let control: string;
             let description: string;
@@ -111,7 +111,7 @@ declare namespace _default {
             export { table_6 as table };
         }
     }
-    export namespace args {
+    namespace args {
         export { defaultOptions as options };
         let value_1: string;
         export { value_1 as value };
@@ -130,7 +130,7 @@ declare namespace _default {
         let invalid_1: boolean;
         export { invalid_1 as invalid };
     }
-    export function render({ options, value, placeholder, size, multiple, searchable, clearable, disabled, invalid }: {
+    function render({ options, value, placeholder, size, multiple, searchable, clearable, disabled, invalid, }: {
         options: any;
         value: any;
         placeholder: any;
@@ -204,12 +204,4 @@ export namespace Disabled {
     }
     export { args_6 as args };
 }
-declare namespace docsParams {
-    namespace docs {
-        namespace story {
-            let inline: boolean;
-            let height: string;
-        }
-    }
-}
 declare const defaultOptions: string;

package/dist/components/y-select.js

@@ -396,8 +396,10 @@ class YumeSelect extends HTMLElement {
             }
 
             .dropdown {
-                position: fixed;
+                position: absolute;
                 z-index: var(--component-select-z-index, 6000);
+                left: 0;
+                right: 0;
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
@@ -786,18 +788,14 @@ class YumeSelect extends HTMLElement {
     _positionDropdown() {
         const rect = this.selectContainer.getBoundingClientRect();
         const gap = 4;
-
-        this.dropdown.style.left = `${rect.left}px`;
-        this.dropdown.style.width = `${rect.width}px`;
-
-        const spaceBelow = window.innerHeight - rect.bottom - gap;
         const maxH = 200;
+        const spaceBelow = window.innerHeight - rect.bottom - gap;
 
         if (spaceBelow >= maxH || spaceBelow >= rect.top) {
-            this.dropdown.style.top = `${rect.bottom + gap}px`;
+            this.dropdown.style.top = `${this.selectContainer.offsetHeight + gap}px`;
             this.dropdown.style.bottom = "auto";
         } else {
-            this.dropdown.style.bottom = `${window.innerHeight - rect.top + gap}px`;
+            this.dropdown.style.bottom = `${this.selectContainer.offsetHeight + gap}px`;
             this.dropdown.style.top = "auto";
         }
     }