@waggylabs/yumekit 0.4.1-beta.63 → 0.4.1-beta.65

package/CHANGELOG.md

@@ -35,7 +35,11 @@ Delete any empty sections before publishing.
 
 ### Added
 
-- Storybook integration — all 26 components now have Storybook stories. Includes a theme background selector that applies the correct design tokens for each active theme.
+- New `y-date` component — a form-associated date (and optional time) input field. Displays a trigger button that opens a `y-datepicker` popup. Supports `name`, `value`, `label`, `label-position`, `placeholder`, `size`, `disabled`, `required`, `invalid`, `clearable`, `show-time`, `min`, `max`, `format`, and `mode` attributes. Emits `change` and `input` events. Fully keyboard accessible with `aria-expanded` management.
+- New `y-datepicker` component — a standalone calendar and optional time picker widget. Supports single date and date range selection via the `mode` attribute. Configurable with `value`, `min`, `max`, `show-time`, `show-seconds`, `format`, `first-day-of-week`, `year-range`, and `panel-count` attributes. Emits a `change` event with the selected date value or `[start, end]` range array. Public API: `clear()`, `formatDate(date)`.
+- 10 new bundled icons: `fan`, `thermometer-high`, `thermometer-low`, `ban`, `bluetooth`, `unlock`, `plug`, `gasoline`, `ev-charger`, `tools`.
+- `comp-date` icon added to the bundled icon registry.
+- Storybook integration — all 28 components now have Storybook stories. Includes a theme background selector that applies the correct design tokens for each active theme.
 - 18 new built-in themes (9 color families × dark + light): `green`, `red`, `teal`, `yellow`, `indigo`, `purple`, `pink`, `brown`, `olive`. All are usable by name in the `theme` attribute of `<y-theme>`.
 
 ### Changed

package/dist/components/y-date.js

@@ -1661,18 +1661,36 @@ if (!customElements.get("y-select")) {
 }
 
 const MONTHS = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December",
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
 ];
 const DAYS_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
 class YumeDatepicker extends HTMLElement {
     static get observedAttributes() {
         return [
-            "mode", "value", "min", "max",
-            "show-time", "show-minutes", "show-seconds",
-            "show-years", "show-months", "show-days",
-            "format", "color",
+            "mode",
+            "value",
+            "min",
+            "max",
+            "show-time",
+            "show-minutes",
+            "show-seconds",
+            "show-years",
+            "show-months",
+            "show-days",
+            "format",
+            "color",
         ];
     }
 
@@ -1701,6 +1719,7 @@ class YumeDatepicker extends HTMLElement {
 
     attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
+        if (this._suppressParse) return;
         if (name === "value") {
             this._parseValue();
         }
@@ -1712,52 +1731,106 @@ class YumeDatepicker extends HTMLElement {
     // -------------------------------------------------------------------------
 
     /** @type {string} "single" | "range" (default "single") */
-    get mode() { return this.getAttribute("mode") || "single"; }
-    set mode(v) { this.setAttribute("mode", v); }
+    get mode() {
+        return this.getAttribute("mode") || "single";
+    }
+    set mode(v) {
+        this.setAttribute("mode", v);
+    }
 
     /** @type {string} ISO date string, or "ISO,ISO" for range */
-    get value() { return this.getAttribute("value") || ""; }
-    set value(v) { this.setAttribute("value", v); }
+    get value() {
+        return this.getAttribute("value") || "";
+    }
+    set value(v) {
+        this.setAttribute("value", v);
+    }
 
     /** @type {string} Minimum selectable date (ISO string) */
-    get min() { return this.getAttribute("min") || ""; }
-    set min(v) { this.setAttribute("min", v); }
+    get min() {
+        return this.getAttribute("min") || "";
+    }
+    set min(v) {
+        this.setAttribute("min", v);
+    }
 
     /** @type {string} Maximum selectable date (ISO string) */
-    get max() { return this.getAttribute("max") || ""; }
-    set max(v) { this.setAttribute("max", v); }
+    get max() {
+        return this.getAttribute("max") || "";
+    }
+    set max(v) {
+        this.setAttribute("max", v);
+    }
 
     /** @type {boolean} Show hour time picker */
-    get showTime() { return this.hasAttribute("show-time"); }
-    set showTime(v) { v ? this.setAttribute("show-time", "") : this.removeAttribute("show-time"); }
+    get showTime() {
+        return this.hasAttribute("show-time");
+    }
+    set showTime(v) {
+        v
+            ? this.setAttribute("show-time", "")
+            : this.removeAttribute("show-time");
+    }
 
     /** @type {boolean} Show minute column in time picker (implies show-time) */
-    get showMinutes() { return this.hasAttribute("show-minutes"); }
-    set showMinutes(v) { v ? this.setAttribute("show-minutes", "") : this.removeAttribute("show-minutes"); }
+    get showMinutes() {
+        return this.hasAttribute("show-minutes");
+    }
+    set showMinutes(v) {
+        v
+            ? this.setAttribute("show-minutes", "")
+            : this.removeAttribute("show-minutes");
+    }
 
     /** @type {boolean} Show second column in time picker (implies show-minutes) */
-    get showSeconds() { return this.hasAttribute("show-seconds"); }
-    set showSeconds(v) { v ? this.setAttribute("show-seconds", "") : this.removeAttribute("show-seconds"); }
+    get showSeconds() {
+        return this.hasAttribute("show-seconds");
+    }
+    set showSeconds(v) {
+        v
+            ? this.setAttribute("show-seconds", "")
+            : this.removeAttribute("show-seconds");
+    }
 
     /** @type {boolean} Show year select in header (default true) */
-    get showYears() { return this.getAttribute("show-years") !== "false"; }
-    set showYears(v) { this.setAttribute("show-years", v ? "true" : "false"); }
+    get showYears() {
+        return this.getAttribute("show-years") !== "false";
+    }
+    set showYears(v) {
+        this.setAttribute("show-years", v ? "true" : "false");
+    }
 
     /** @type {boolean} Show month select in header (default true) */
-    get showMonths() { return this.getAttribute("show-months") !== "false"; }
-    set showMonths(v) { this.setAttribute("show-months", v ? "true" : "false"); }
+    get showMonths() {
+        return this.getAttribute("show-months") !== "false";
+    }
+    set showMonths(v) {
+        this.setAttribute("show-months", v ? "true" : "false");
+    }
 
     /** @type {boolean} Show day grid (default true) */
-    get showDays() { return this.getAttribute("show-days") !== "false"; }
-    set showDays(v) { this.setAttribute("show-days", v ? "true" : "false"); }
+    get showDays() {
+        return this.getAttribute("show-days") !== "false";
+    }
+    set showDays(v) {
+        this.setAttribute("show-days", v ? "true" : "false");
+    }
 
     /** @type {string} Date format string (default "MM/DD/YYYY") */
-    get format() { return this.getAttribute("format") || "MM/DD/YYYY"; }
-    set format(v) { this.setAttribute("format", v); }
+    get format() {
+        return this.getAttribute("format") || "MM/DD/YYYY";
+    }
+    set format(v) {
+        this.setAttribute("format", v);
+    }
 
     /** @type {string} Color theme (default "primary") */
-    get color() { return this.getAttribute("color") || "primary"; }
-    set color(v) { this.setAttribute("color", v); }
+    get color() {
+        return this.getAttribute("color") || "primary";
+    }
+    set color(v) {
+        this.setAttribute("color", v);
+    }
 
     // -------------------------------------------------------------------------
     // Public
@@ -1783,7 +1856,8 @@ class YumeDatepicker extends HTMLElement {
     }
 
     render() {
-        const showTimeCols = this.showTime || this.showMinutes || this.showSeconds;
+        const showTimeCols =
+            this.showTime || this.showMinutes || this.showSeconds;
         const isRange = this.mode === "range";
 
         this.shadowRoot.innerHTML = `
@@ -1804,10 +1878,20 @@ class YumeDatepicker extends HTMLElement {
 
     _applyTimesToDates() {
         if (this._startDate) {
-            this._startDate.setHours(this._startTime.h, this._startTime.m, this._startTime.s, 0);
+            this._startDate.setHours(
+                this._startTime.h,
+                this._startTime.m,
+                this._startTime.s,
+                0,
+            );
         }
         if (this._endDate) {
-            this._endDate.setHours(this._endTime.h, this._endTime.m, this._endTime.s, 0);
+            this._endDate.setHours(
+                this._endTime.h,
+                this._endTime.m,
+                this._endTime.s,
+                0,
+            );
         }
     }
 
@@ -1825,20 +1909,39 @@ class YumeDatepicker extends HTMLElement {
 
         root.querySelectorAll(".month-sel").forEach((sel) => {
             sel.addEventListener("change", () => {
-                this._viewDate.setMonth(parseInt(sel.value));
+                const targetMonth = parseInt(sel.value);
+                if (sel.dataset.side === "right") {
+                    // Right panel shows _viewDate + 1 month, so back-calculate
+                    const d = new Date(this._viewDate);
+                    d.setMonth(targetMonth - 1); // JS handles month=-1 as Dec of prev year
+                    d.setDate(1);
+                    this._viewDate = d;
+                } else {
+                    this._viewDate.setMonth(targetMonth);
+                }
                 this.render();
             });
         });
 
         root.querySelectorAll(".year-sel").forEach((sel) => {
             sel.addEventListener("change", () => {
-                this._viewDate.setFullYear(parseInt(sel.value));
+                const targetYear = parseInt(sel.value);
+                if (sel.dataset.side === "right") {
+                    // 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);
+                } else {
+                    this._viewDate.setFullYear(targetYear);
+                }
                 this.render();
             });
         });
 
         root.querySelectorAll(".day-btn").forEach((btn) => {
-            btn.addEventListener("click", () => this._handleDayClick(new Date(btn.dataset.date)));
+            btn.addEventListener("click", () =>
+                this._handleDayClick(new Date(btn.dataset.date)),
+            );
             btn.addEventListener("mouseenter", () => {
                 if (this._awaitingEnd) {
                     this._hoverDate = new Date(btn.dataset.date);
@@ -1904,7 +2007,9 @@ class YumeDatepicker extends HTMLElement {
         const firstDow = new Date(year, month, 1).getDay();
         const daysInMonth = new Date(year, month + 1, 0).getDate();
 
-        const headers = DAYS_SHORT.map((d) => `<span class="day-hdr">${d}</span>`).join("");
+        const headers = DAYS_SHORT.map(
+            (d) => `<span class="day-hdr">${d}</span>`,
+        ).join("");
         const blanks = Array(firstDow).fill(`<span></span>`).join("");
 
         const cells = Array.from({ length: daysInMonth }, (_, i) => {
@@ -2202,13 +2307,15 @@ class YumeDatepicker extends HTMLElement {
             >${h12}:00 ${ampm}</y-button>`;
         }).join("");
 
-        const minutesBtns = this.showMinutes ? `
+        const minutesBtns = this.showMinutes
+            ? `
             <div class="time-col-wrap">
                 <span class="time-col-hdr">Min</span>
                 <div class="time-col" data-col="minutes">
-                    ${Array.from({ length: 12 }, (_, i) => i * 5).map((m) => {
-                        const sel = Math.floor(time.m / 5) * 5 === m;
-                        return `<y-button
+                    ${Array.from({ length: 12 }, (_, i) => i * 5)
+                        .map((m) => {
+                            const sel = Math.floor(time.m / 5) * 5 === m;
+                            return `<y-button
                             class="time-btn${sel ? " selected" : ""}"
                             style-type="${sel ? "filled" : "flat"}"
                             color="${sel ? this.color : "base"}"
@@ -2216,18 +2323,22 @@ class YumeDatepicker extends HTMLElement {
                             data-minute="${m}"
                             data-side="${side}"
                         >${String(m).padStart(2, "0")}</y-button>`;
-                    }).join("")}
+                        })
+                        .join("")}
                 </div>
             </div>
-        ` : "";
+        `
+            : "";
 
-        const secondsBtns = this.showSeconds ? `
+        const secondsBtns = this.showSeconds
+            ? `
             <div class="time-col-wrap">
                 <span class="time-col-hdr">Sec</span>
                 <div class="time-col" data-col="seconds">
-                    ${Array.from({ length: 12 }, (_, i) => i * 5).map((s) => {
-                        const sel = Math.floor(time.s / 5) * 5 === s;
-                        return `<y-button
+                    ${Array.from({ length: 12 }, (_, i) => i * 5)
+                        .map((s) => {
+                            const sel = Math.floor(time.s / 5) * 5 === s;
+                            return `<y-button
                             class="time-btn${sel ? " selected" : ""}"
                             style-type="${sel ? "filled" : "flat"}"
                             color="${sel ? this.color : "base"}"
@@ -2235,10 +2346,12 @@ class YumeDatepicker extends HTMLElement {
                             data-second="${s}"
                             data-side="${side}"
                         >${String(s).padStart(2, "0")}</y-button>`;
-                    }).join("")}
+                        })
+                        .join("")}
                 </div>
             </div>
-        ` : "";
+        `
+            : "";
 
         return `
             <div class="time-column${disabled ? " time-disabled" : ""}">
@@ -2265,37 +2378,51 @@ class YumeDatepicker extends HTMLElement {
         const selected = this._startDate?.getFullYear();
         const minY = this._minDate()?.getFullYear() ?? vd.getFullYear() - 10;
         const maxY = this._maxDate()?.getFullYear() ?? vd.getFullYear() + 10;
-        const years = Array.from({ length: maxY - minY + 1 }, (_, i) => minY + i);
+        const years = Array.from(
+            { length: maxY - minY + 1 },
+            (_, i) => minY + i,
+        );
         return `
             <div class="year-grid">
-                ${years.map((y) => `<y-button
+                ${years
+                    .map(
+                        (y) => `<y-button
                     class="year-btn"
                     style-type="${y === selected ? "filled" : "flat"}"
                     color="${y === selected ? this.color : "base"}"
                     size="small"
                     data-year="${y}"
-                >${y}</y-button>`).join("")}
+                >${y}</y-button>`,
+                    )
+                    .join("")}
             </div>
         `;
     }
 
     _emitChange() {
+        this._suppressParse = true;
         const value = this._buildValueString();
         if (value !== this.getAttribute("value")) {
             this.setAttribute("value", value);
         }
-        this.dispatchEvent(new CustomEvent("change", {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value,
-                startDate: this._startDate ? new Date(this._startDate) : null,
-                endDate: this._endDate ? new Date(this._endDate) : null,
-                formatted: this.mode === "range"
-                    ? `${this._formatDate(this._startDate)}${this._endDate ? " – " + this._formatDate(this._endDate) : ""}`
-                    : this._formatDate(this._startDate),
-            },
-        }));
+        this._suppressParse = false;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value,
+                    startDate: this._startDate
+                        ? new Date(this._startDate)
+                        : null,
+                    endDate: this._endDate ? new Date(this._endDate) : null,
+                    formatted:
+                        this.mode === "range"
+                            ? `${this._formatDate(this._startDate)}${this._endDate ? " – " + this._formatDate(this._endDate) : ""}`
+                            : this._formatDate(this._startDate),
+                },
+            }),
+        );
     }
 
     _formatDate(date) {
@@ -2341,11 +2468,13 @@ class YumeDatepicker extends HTMLElement {
 
     _inRange(date) {
         if (this.mode !== "range" || !this._startDate) return false;
-        const end = this._endDate || (this._awaitingEnd ? this._hoverDate : null);
+        const end =
+            this._endDate || (this._awaitingEnd ? this._hoverDate : null);
         if (!end) return false;
-        const [lo, hi] = this._startDate <= end
-            ? [this._startDate, end]
-            : [end, this._startDate];
+        const [lo, hi] =
+            this._startDate <= end
+                ? [this._startDate, end]
+                : [end, this._startDate];
         return date > lo && date < hi;
     }
 
@@ -2366,12 +2495,19 @@ class YumeDatepicker extends HTMLElement {
     }
 
     _isRangeEdge(date) {
-        return this._sameDay(date, this._startDate) || this._sameDay(date, this._endDate);
+        return (
+            this._sameDay(date, this._startDate) ||
+            this._sameDay(date, this._endDate)
+        );
     }
 
-    _maxDate() { return this.max ? new Date(this.max) : null; }
+    _maxDate() {
+        return this.max ? new Date(this.max) : null;
+    }
 
-    _minDate() { return this.min ? new Date(this.min) : null; }
+    _minDate() {
+        return this.min ? new Date(this.min) : null;
+    }
 
     _navigate(months) {
         this._viewDate.setMonth(this._viewDate.getMonth() + months);

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

@@ -73,6 +73,7 @@ export class YumeDatepicker extends HTMLElement {
     _buildValueString(): any;
     _buildYearGrid(vd: any): string;
     _emitChange(): void;
+    _suppressParse: boolean;
     _formatDate(date: any): string;
     _handleDayClick(date: any): void;
     _inRange(date: any): boolean;