@waggylabs/yumekit 0.5.1-beta.8 → 0.5.1-beta.9

package/CHANGELOG.md

@@ -37,7 +37,7 @@ Delete any empty sections before publishing.
 
 - `y-checkbox` / `y-radio` — checked-state color hooks so themes can fill the control on selection: `--component-checkbox-checked-background` / `-checked-border-color` / `-checked-icon-color` and `--component-radio-background` / `-checked-background` / `-checked-border-color` / `-checked-dot-color`. Each falls back to the matching unchecked value, so existing themes are unchanged. The design-system themes now use them — checked checkboxes (and Shadcn/Bootstrap/Primer radios) fill with the primary color and draw the check/dot in the primary-inverse color, matching each system's native look.
 
-- Several theme color variations including the `Catppuccin` and `Nord` color schemes, two `Rose` color themes, two `Neobrutalist` themes, as well as several new themes based on some of the most popular design systems. This includes Material, Carbon, Ant, Shadcn, Primer, and Bootstrap.
+- Several theme color variations including `Slate`, `Rose`, the `Catppuccin` and `Nord` color schemes, two `Neobrutalist` themes, as well as several new themes based on some of the most popular design systems. This includes Material, Carbon, Ant, Shadcn, Primer, Bootstrap, and a few throwback themes inspired by Yumekit's spiritual ancestor: `Kepler UI`.
 
 - `y-tabs` — new `variant="accent"` style: minimal tabs where the active tab shows a primary-colored indicator border on its content-facing edge (bottom for top tabs, etc.). The default bordered style is unchanged. Adds `--component-tabs-accent-width` (indicator thickness). The border-width token is normalized to `--component-tabs-border-width` (matching `--component-tabs-border-color`); the legacy `--component-tab-border-width` is still honored as a fallback.
 
@@ -83,11 +83,17 @@ Delete any empty sections before publishing.
 
 ### Fixed
 
+- `y-sidebar` — nav/footer icons now stay in the same position between the expanded and collapsed states under themes whose borders use a multi-value width (e.g. the Neobrutalist offset border `2px 2px 6px 2px`). The icon-column width is now derived from the sidebar's resolved horizontal border (flat buttons render no border) instead of an invalid `calc()` that multiplied the multi-value token, which had collapsed the column to `auto` and shifted icons.
+
+- `y-drawer` — corners closest to the screen's edge are now squared in all themes.
+
+- `y-datepicker` — the month and year pickers were reworked. The month picker (`show-days="false"`) now shows a selectable year dropdown in its header (toggled by `show-years`, omitted when `false`) above the twelve months, and the year picker (`show-months="false"`) now bounds its scrollable year grid with two start/end year inputs. Clicking a month or year now selects it and fires `change`; clicking a year in the year picker no longer shifts the visible range.
+
 - `y-theme` — switching themes now clears the previous theme's CSS custom properties from the host before applying the new ones. Variables defined only by the outgoing theme (e.g. a theme-specific token like `--component-tabs-inactive-background`) previously lingered inline and "stuck" until a page reload; they are now removed on every switch.
 
 - `y-tabs` — unselected tabs now use a dedicated `--component-tabs-inactive-background` (falling back to `--component-tabs-border-color`, so existing themes are unchanged) instead of always painting the tab background with the border color. This fixes the Neobrutalist themes, where the border color equals the text color and made unselected tab labels unreadable; both Neobrutalist themes now set it to a distinct surface tone.
 
-- Portaled overlays now inherit the active theme. `y-help` (tour overlay/tooltip), `y-popover` (`portal` mode), and `y-select` (`portal` mode) previously rendered into `document.body`, escaping the `<y-theme>` subtree that scopes the theme's CSS custom properties — so they fell back to the default un-themed palette. They now mount into the nearest enclosing `<y-theme>` (falling back to `document.body` when there isn't one), so the portaled surface matches the active theme and tracks live theme switches. Keep the component inside your `<y-theme>`.
+- Portaled overlays now inherit the active theme. `y-help` (tour overlay/tooltip), `y-popover` (`portal` mode), and `y-select` (`portal` mode) previously rendered into `document.body`, escaping the `<y-theme>` subtree that scopes the theme's CSS custom properties — so they fell back to the default un-themed palette. They now mount into the nearest enclosing `<y-theme>`, walking up across shadow boundaries so the fix also applies when the component is used inside another component's shadow root (e.g. `y-data-grid`'s per-column header menus), falling back to `document.body` when there is no theme ancestor. The portaled surface matches the active theme and tracks live theme switches. Keep the component inside your `<y-theme>`.
 
 - Form field components now share one field background. `y-select` (trigger and dropdown) used `base.background.app` while `y-input` / `y-textarea` / `y-color` / `y-date` used `base.background.component`; `select.background` is now `base.background.component` across all themes, so fields match when placed together on a form (most visible in the Material and Carbon themes). The select dropdown panel now also matches menus/popovers.
 

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

@@ -1,6 +1,7 @@
 export class YumeCode extends HTMLElement {
     static get observedAttributes(): string[];
     _copiedTimer: any;
+    _lineFlashTimer: any;
     _isExpanded: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -63,6 +64,7 @@ export class YumeCode extends HTMLElement {
     _readTemplateSource(tpl: any): any;
     _render(): void;
     _sanitizedHighlightedLines(): any[][];
+    _showLineCopiedBadge(line: any): HTMLElement;
     _tokenizedLines(source: any): {
         spans: string[];
         text: string;

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

@@ -1,6 +1,7 @@
 export class YumeCode extends HTMLElement {
     static get observedAttributes(): string[];
     _copiedTimer: any;
+    _lineFlashTimer: any;
     _isExpanded: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -63,6 +64,7 @@ export class YumeCode extends HTMLElement {
     _readTemplateSource(tpl: any): any;
     _render(): void;
     _sanitizedHighlightedLines(): any[][];
+    _showLineCopiedBadge(line: any): HTMLElement;
     _tokenizedLines(source: any): {
         spans: string[];
         text: string;

package/dist/components/y-code.js

@@ -1681,6 +1681,7 @@ class YumeCode extends HTMLElement {
         super();
         this.attachShadow({ mode: "open" });
         this._copiedTimer = null;
+        this._lineFlashTimer = null;
         this._isExpanded = false;
     }
 
@@ -1694,6 +1695,10 @@ class YumeCode extends HTMLElement {
             clearTimeout(this._copiedTimer);
             this._copiedTimer = null;
         }
+        if (this._lineFlashTimer) {
+            clearTimeout(this._lineFlashTimer);
+            this._lineFlashTimer = null;
+        }
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
@@ -2017,6 +2022,7 @@ class YumeCode extends HTMLElement {
                 padding: 0 var(--spacing-small, 8px);
                 white-space: ${this.wrap ? "pre-wrap" : "pre"};
                 word-break: ${this.wrap ? "break-word" : "normal"};
+                transition: background 0.4s ease;
             }
 
             .line-number {
@@ -2042,9 +2048,36 @@ class YumeCode extends HTMLElement {
                 outline: 2px solid var(--primary-content--, #1976d2);
                 outline-offset: -2px;
             }
-            .line.is-copied {
+            .line.is-copied,
+            :host([line-numbers]) .line[role="button"].is-copied {
                 background: var(--component-code-line-copied-bg, var(--success-content-light, rgba(46, 125, 50, 0.12)));
-                transition: background 0.4s ease;
+            }
+
+            /* Floating "Copied!" pill anchored to the copied line. Its top is
+               set in JS; it's pinned to the right edge of the viewport so it
+               stays visible regardless of horizontal scroll. */
+            .line-copied-badge {
+                position: absolute;
+                right: var(--spacing-small, 8px);
+                z-index: 2;
+                pointer-events: none;
+                padding: 0 var(--spacing-x-small, 5px);
+                border-radius: var(--radii-full, 999px);
+                background: var(--component-code-line-copied-badge-bg, var(--success-content--, #2e7d32));
+                color: var(--component-code-line-copied-badge-text-color, var(--success-content-inverse, #fff));
+                font-family: var(--font-family-body, sans-serif);
+                font-size: 0.625rem;
+                font-weight: var(--font-weight-body, 400);
+                line-height: 1.6;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+                animation: y-code-copied-badge-in 0.15s ease;
+            }
+            @keyframes y-code-copied-badge-in {
+                from { opacity: 0; transform: translateY(-3px); }
+                to { opacity: 1; transform: none; }
+            }
+            @media (prefers-reduced-motion: reduce) {
+                .line-copied-badge { animation: none; }
             }
 
             .line-content { flex: 1; min-width: 0; }
@@ -2180,8 +2213,22 @@ class YumeCode extends HTMLElement {
             `.line[data-line="${index}"]`,
         );
         if (!line) return;
+
+        if (this._lineFlashTimer) clearTimeout(this._lineFlashTimer);
+        // Clear any in-progress flash first so rapid successive copies don't
+        // strand the highlight on a previously-copied line.
+        this.shadowRoot
+            .querySelectorAll(".line.is-copied")
+            .forEach((el) => el.classList.remove("is-copied"));
+
         line.classList.add("is-copied");
-        setTimeout(() => line.classList.remove("is-copied"), 600);
+        const badge = this._showLineCopiedBadge(line);
+
+        this._lineFlashTimer = setTimeout(() => {
+            this._lineFlashTimer = null;
+            line.classList.remove("is-copied");
+            if (badge) badge.remove();
+        }, 1500);
     }
 
     _hasHeaderSlot() {
@@ -2382,6 +2429,37 @@ class YumeCode extends HTMLElement {
         return lines;
     }
 
+    _showLineCopiedBadge(line) {
+        const preWrap = this.shadowRoot.querySelector(".pre-wrap");
+        const pre = this.shadowRoot.querySelector("pre.code");
+        if (!preWrap || !pre) return null;
+
+        const stale = preWrap.querySelector(".line-copied-badge");
+        if (stale) stale.remove();
+
+        const badge = createElement(
+            "span",
+            {
+                class: "line-copied-badge",
+                part: "line-copied-badge",
+                role: "status",
+            },
+            [this.copiedLabel],
+        );
+        preWrap.appendChild(badge);
+
+        // `line.offsetTop` is measured against `.pre-wrap` (the nearest
+        // positioned ancestor); subtract the scroll offset so the badge tracks
+        // the copied line when the block is scrolled vertically (max-lines).
+        const top =
+            line.offsetTop -
+            pre.scrollTop +
+            (line.offsetHeight - badge.offsetHeight) / 2;
+        badge.style.top = `${Math.max(top, 0)}px`;
+
+        return badge;
+    }
+
     _tokenizedLines(source) {
         // Run the language tokenizer, then split the flat token stream into
         // per-line arrays of `{ spans, text }` so the existing line renderer

package/dist/components/y-color.js

@@ -1,4 +1,4 @@
-import { manageLabelVisibility, createElement, isSafeCssColor, contrastTextColor, parseColorString, rgbToHsv, hsvToRgb, rgbToHex, hsvToHsl, rgbaToHex, clamp, hslToHsv } from '../../modules/helpers.js';
+import { manageLabelVisibility, createElement, isSafeCssColor, contrastTextColor, resolveThemeMountPoint, parseColorString, rgbToHsv, hsvToRgb, rgbToHex, hsvToHsl, rgbaToHex, clamp, hslToHsv } from '../../modules/helpers.js';
 
 class YumeInput extends HTMLElement {
     static formAssociated = true;
@@ -1616,6 +1616,20 @@ class YumeSelect extends HTMLElement {
 
         const portal = document.createElement("div");
         portal.className = "y-select-portal";
+
+        // Custom properties set inline on the host don't cascade into the
+        // portal — it mounts under y-theme/body, not as a descendant of this
+        // element. Forward a z-index override so a select opened inside a
+        // higher-stacked context (e.g. a portaled popover) can lift its
+        // dropdown above that context. The dropdown inherits the value through
+        // the portal's shadow boundary.
+        const zOverride = this.style
+            .getPropertyValue("--component-select-z-index")
+            .trim();
+        if (zOverride) {
+            portal.style.setProperty("--component-select-z-index", zOverride);
+        }
+
         const shadow = portal.attachShadow({ mode: "open" });
         shadow.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets;
 
@@ -1640,7 +1654,7 @@ class YumeSelect extends HTMLElement {
     }
 
     _resolveMountPoint() {
-        return this.closest("y-theme") || document.body;
+        return resolveThemeMountPoint(this);
     }
 
     _openDropdown() {

package/dist/components/y-colorpicker.js

@@ -1,4 +1,4 @@
-import { manageLabelVisibility, createElement, isSafeCssColor, contrastTextColor, parseColorString, rgbToHsv, hsvToRgb, rgbToHex, hsvToHsl, rgbaToHex, clamp, hslToHsv } from '../../modules/helpers.js';
+import { manageLabelVisibility, createElement, isSafeCssColor, contrastTextColor, resolveThemeMountPoint, parseColorString, rgbToHsv, hsvToRgb, rgbToHex, hsvToHsl, rgbaToHex, clamp, hslToHsv } from '../../modules/helpers.js';
 
 class YumeInput extends HTMLElement {
     static formAssociated = true;
@@ -1616,6 +1616,20 @@ class YumeSelect extends HTMLElement {
 
         const portal = document.createElement("div");
         portal.className = "y-select-portal";
+
+        // Custom properties set inline on the host don't cascade into the
+        // portal — it mounts under y-theme/body, not as a descendant of this
+        // element. Forward a z-index override so a select opened inside a
+        // higher-stacked context (e.g. a portaled popover) can lift its
+        // dropdown above that context. The dropdown inherits the value through
+        // the portal's shadow boundary.
+        const zOverride = this.style
+            .getPropertyValue("--component-select-z-index")
+            .trim();
+        if (zOverride) {
+            portal.style.setProperty("--component-select-z-index", zOverride);
+        }
+
         const shadow = portal.attachShadow({ mode: "open" });
         shadow.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets;
 
@@ -1640,7 +1654,7 @@ class YumeSelect extends HTMLElement {
     }
 
     _resolveMountPoint() {
-        return this.closest("y-theme") || document.body;
+        return resolveThemeMountPoint(this);
     }
 
     _openDropdown() {

package/dist/components/y-data-grid.js

@@ -1,4 +1,4 @@
-import { createElement, isSafeCssColor, manageLabelVisibility, contrastTextColor, getColorVarPair, clamp, measureCSSLength, GAP_TOKEN_MAP } from '../../modules/helpers.js';
+import { createElement, isSafeCssColor, manageLabelVisibility, contrastTextColor, resolveThemeMountPoint, getColorVarPair, clamp, measureCSSLength, GAP_TOKEN_MAP } from '../../modules/helpers.js';
 
 /**
  * Icon registry — a runtime map of icon names to SVG markup strings.
@@ -1875,6 +1875,20 @@ class YumeSelect extends HTMLElement {
 
         const portal = document.createElement("div");
         portal.className = "y-select-portal";
+
+        // Custom properties set inline on the host don't cascade into the
+        // portal — it mounts under y-theme/body, not as a descendant of this
+        // element. Forward a z-index override so a select opened inside a
+        // higher-stacked context (e.g. a portaled popover) can lift its
+        // dropdown above that context. The dropdown inherits the value through
+        // the portal's shadow boundary.
+        const zOverride = this.style
+            .getPropertyValue("--component-select-z-index")
+            .trim();
+        if (zOverride) {
+            portal.style.setProperty("--component-select-z-index", zOverride);
+        }
+
         const shadow = portal.attachShadow({ mode: "open" });
         shadow.adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets;
 
@@ -1899,7 +1913,7 @@ class YumeSelect extends HTMLElement {
     }
 
     _resolveMountPoint() {
-        return this.closest("y-theme") || document.body;
+        return resolveThemeMountPoint(this);
     }
 
     _openDropdown() {
@@ -2992,6 +3006,8 @@ class YumeDatepicker extends HTMLElement {
         this._awaitingEnd = false;
         this._startTime = { h: 0, m: 0, s: 0 };
         this._endTime = { h: 0, m: 0, s: 0 };
+        this._yearRangeStart = null;
+        this._yearRangeEnd = null;
         this._mql = null;
         this._isMobile = false;
         this._onMediaChange = this._onMediaChange.bind(this);
@@ -3299,17 +3315,33 @@ class YumeDatepicker extends HTMLElement {
             });
         });
 
+        root.querySelectorAll(".m-year-sel").forEach((sel) => {
+            sel.addEventListener("change", () => {
+                this._viewDate.setFullYear(parseInt(sel.value));
+                this.render();
+            });
+        });
+
         root.querySelectorAll(".month-btn").forEach((btn) => {
             btn.addEventListener("click", () => {
-                this._viewDate.setMonth(parseInt(btn.dataset.month));
-                this.render();
+                const vd = this._viewDateForSide(btn.dataset.side);
+                this._selectMonth(vd.getFullYear(), parseInt(btn.dataset.month));
             });
         });
 
         root.querySelectorAll(".year-btn").forEach((btn) => {
-            btn.addEventListener("click", () => {
-                this._viewDate.setFullYear(parseInt(btn.dataset.year));
-                this.render();
+            btn.addEventListener("click", () =>
+                this._selectYear(parseInt(btn.dataset.year)),
+            );
+        });
+
+        root.querySelectorAll(".year-range-input").forEach((input) => {
+            input.addEventListener("input", () => {
+                const val = parseInt(input.value, 10);
+                if (isNaN(val)) return;
+                if (input.dataset.bound === "start") this._yearRangeStart = val;
+                else this._yearRangeEnd = val;
+                this._refreshYearGrid();
             });
         });
 
@@ -3406,23 +3438,14 @@ class YumeDatepicker extends HTMLElement {
         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>
-            `;
+        // Month picker: 12-month grid with an optional year dropdown.
+        if (!this.showDays && this.showMonths) {
+            return this._buildMonthPickerHeader(year);
+        }
+
+        // Year picker: start/end year inputs bounding the scrollable grid.
+        if (!this.showDays && !this.showMonths) {
+            return this._buildYearPickerHeader();
         }
 
         const showPrev = !isRange || side === "left";
@@ -3485,6 +3508,27 @@ class YumeDatepicker extends HTMLElement {
         `;
     }
 
+    _buildMonthPickerHeader(year) {
+        if (!this.showYears) return "";
+
+        const minYear = this._minDate()?.getFullYear() ?? year - 50;
+        const maxYear = this._maxDate()?.getFullYear() ?? year + 50;
+        const yearOptions = JSON.stringify(
+            Array.from({ length: maxYear - minYear + 1 }, (_, i) => ({
+                value: String(minYear + i),
+                label: String(minYear + i),
+            })),
+        );
+
+        return `
+            <div class="cal-header">
+                <div class="header-selects">
+                    <y-select class="m-year-sel" size="small" value="${year}" options='${yearOptions}'></y-select>
+                </div>
+            </div>
+        `;
+    }
+
     _buildPanel(side, showHours) {
         const vd = this._viewDateForSide(side);
         const isRange = this.mode === "range";
@@ -3574,10 +3618,20 @@ class YumeDatepicker extends HTMLElement {
 
             .month-sel { min-width: 120px; }
             .year-sel  { min-width: 80px;  }
+            .m-year-sel { min-width: 90px; }
 
-            .header-label {
-                font-weight: 600;
-                white-space: nowrap;
+            /* ---- Year-picker range inputs ---- */
+
+            .cal-header.year-range {
+                justify-content: center;
+                gap: var(--spacing-x-small, 6px);
+            }
+
+            .year-range-input { width: 5.5em; }
+
+            .year-range-sep {
+                color: var(--component-datepicker-header-color);
+                flex-shrink: 0;
             }
 
             /* ---- Day grid ---- */
@@ -3777,31 +3831,57 @@ class YumeDatepicker extends HTMLElement {
     }
 
     _buildYearGrid(vd) {
+        this._ensureYearRange(vd);
         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 lo = Math.min(this._yearRangeStart, this._yearRangeEnd);
+        const hi = Math.max(this._yearRangeStart, this._yearRangeEnd);
+        const years = Array.from({ length: hi - lo + 1 }, (_, i) => lo + i);
         return `
             <div class="year-grid">
                 ${years
-                    .map(
-                        (y) => `<y-button
+                    .map((y) => {
+                        const isSelected = y === selected;
+                        const disabled = this._isYearDisabled(y);
+                        return `<y-button
                     class="year-btn"
-                    style-type="${y === selected ? "filled" : "flat"}"
-                    color="${y === selected ? this.color : "base"}"
+                    style-type="${isSelected ? "filled" : "flat"}"
+                    color="${isSelected ? this.color : "base"}"
                     size="small"
                     padding-mode="square"
                     data-year="${y}"
-                >${y}</y-button>`,
-                    )
+                    ${disabled ? "disabled" : ""}
+                >${y}</y-button>`;
+                    })
                     .join("")}
             </div>
         `;
     }
 
+    _buildYearPickerHeader() {
+        this._ensureYearRange(this._viewDate);
+        return `
+            <div class="cal-header year-range">
+                <y-input
+                    class="year-range-input"
+                    data-bound="start"
+                    type="number"
+                    size="small"
+                    value="${this._yearRangeStart}"
+                    aria-label="Start year"
+                ></y-input>
+                <span class="year-range-sep">–</span>
+                <y-input
+                    class="year-range-input"
+                    data-bound="end"
+                    type="number"
+                    size="small"
+                    value="${this._yearRangeEnd}"
+                    aria-label="End year"
+                ></y-input>
+            </div>
+        `;
+    }
+
     _emitChange(source) {
         this._suppressParse = true;
         const value = this._buildValueString();
@@ -3829,6 +3909,16 @@ class YumeDatepicker extends HTMLElement {
         );
     }
 
+    _ensureYearRange(vd) {
+        if (this._yearRangeStart != null && this._yearRangeEnd != null) return;
+        const base =
+            this._startDate && !isNaN(this._startDate)
+                ? this._startDate.getFullYear()
+                : vd.getFullYear();
+        this._yearRangeStart = this._minDate()?.getFullYear() ?? base - 10;
+        this._yearRangeEnd = this._maxDate()?.getFullYear() ?? base + 10;
+    }
+
     _formatDate(date) {
         if (!date || isNaN(date)) return "";
         const pad = (n) => String(n).padStart(2, "0");
@@ -3921,6 +4011,14 @@ class YumeDatepicker extends HTMLElement {
         );
     }
 
+    _isYearDisabled(year) {
+        const min = this._minDate();
+        const max = this._maxDate();
+        if (min && year < min.getFullYear()) return true;
+        if (max && year > max.getFullYear()) return true;
+        return false;
+    }
+
     _maxDate() {
         return this.max ? new Date(this.max) : null;
     }
@@ -3984,6 +4082,23 @@ class YumeDatepicker extends HTMLElement {
         }
     }
 
+    _refreshYearGrid() {
+        const grid = this.shadowRoot.querySelector(".year-grid");
+        if (!grid) return;
+
+        const lo = Math.min(this._yearRangeStart, this._yearRangeEnd);
+        const hi = Math.max(this._yearRangeStart, this._yearRangeEnd);
+        // Skip runaway ranges while the user is still typing a bound.
+        if (hi - lo > 500) return;
+
+        grid.outerHTML = this._buildYearGrid(this._viewDate);
+        this.shadowRoot.querySelectorAll(".year-btn").forEach((btn) => {
+            btn.addEventListener("click", () =>
+                this._selectYear(parseInt(btn.dataset.year)),
+            );
+        });
+    }
+
     _sameDay(a, b) {
         if (!a || !b) return false;
         return (
@@ -4002,6 +4117,33 @@ class YumeDatepicker extends HTMLElement {
         });
     }
 
+    _selectMonth(year, month) {
+        const src =
+            this._startDate && !isNaN(this._startDate) ? this._startDate : null;
+        const day = src ? src.getDate() : 1;
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+        this._startDate = new Date(year, month, Math.min(day, daysInMonth));
+        this._viewDate = new Date(year, month, 1);
+        this._applyTimesToDates();
+        this._emitChange("month");
+        this.render();
+    }
+
+    _selectYear(year) {
+        const src =
+            this._startDate && !isNaN(this._startDate) ? this._startDate : null;
+        const month = src ? src.getMonth() : 0;
+        const day = src ? src.getDate() : 1;
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+        this._startDate = new Date(year, month, Math.min(day, daysInMonth));
+        this._viewDate = new Date(year, month, 1);
+        this._applyTimesToDates();
+        this._emitChange("year");
+        this.render();
+    }
+
     _setupMediaQuery() {
         this._teardownMediaQuery();
         const bp = this._getBreakpointPx();
@@ -8000,15 +8142,7 @@ class YumePopover extends HTMLElement {
     }
 
     _resolveMountPoint() {
-        // Portaling escapes ancestor stacking/overflow contexts, but YumeKit
-        // delivers a theme as CSS custom properties scoped to the <y-theme>
-        // subtree (set inline on that element). Appending to document.body
-        // would drop out of that scope, so every --base-* / --component-* /
-        // --primary-* lookup falls back to the un-themed default literals.
-        // Mount into the nearest enclosing <y-theme> instead so the portaled
-        // surface inherits the active theme; fall back to <body> when there
-        // is no y-theme ancestor (or it lives across a shadow boundary).
-        return this.closest("y-theme") || document.body;
+        return resolveThemeMountPoint(this);
     }
 
     _restoreFocus() {
@@ -10644,6 +10778,10 @@ class YumeDataGrid extends HTMLElement {
             value: currentOp,
             portal: "",
         });
+        opSelect.style.setProperty(
+            "--component-select-z-index",
+            "calc(var(--component-popover-z-index, 7500) + 1)",
+        );
         const valInput = createElement("y-input", {
             size: "small",
             type,