@melodicdev/components 1.5.11 → 1.5.13

package/lib/components/forms/button/button.component.d.ts

@@ -34,6 +34,14 @@ export declare class ButtonComponent implements IElementRef, OnInit {
     loading: boolean;
     /** Make button full width */
     fullWidth: boolean;
+    /** If set, renders as an anchor tag instead of a button */
+    href: string | null;
+    /** Anchor target (only used when href is set) */
+    target: string | null;
+    /** Anchor rel (only used when href is set) */
+    rel: string | null;
+    /** Anchor download (only used when href is set) */
+    download: string | null;
     onInit(): void;
     /** Whether the button is effectively disabled */
     get isDisabled(): boolean;

package/lib/components/forms/button/button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,6CAA6C,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,eAAgB,YAAW,WAAW,EAAE,MAAM;IACnD,UAAU,EAAG,WAAW,CAAC;IAEhC,2BAA2B;IACpB,OAAO,EAAE,aAAa,CAAa;IAE1C,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,uBAAuB;IAChB,IAAI,EAAE,UAAU,CAAY;IAEnC,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,OAAO,UAAS;IAEvB,6BAA6B;IACtB,SAAS,UAAS;IAElB,MAAM,IAAI,IAAI;IAOrB,iDAAiD;IACjD,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,0BAA0B;IACnB,WAAW,GAAI,OAAO,UAAU,KAAG,IAAI,CAe5C;CACF"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,6CAA6C,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,eAAgB,YAAW,WAAW,EAAE,MAAM;IACnD,UAAU,EAAG,WAAW,CAAC;IAEhC,2BAA2B;IACpB,OAAO,EAAE,aAAa,CAAa;IAE1C,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,uBAAuB;IAChB,IAAI,EAAE,UAAU,CAAY;IAEnC,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,OAAO,UAAS;IAEvB,6BAA6B;IACtB,SAAS,UAAS;IAEzB,2DAA2D;IACpD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElC,iDAAiD;IAC1C,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,8CAA8C;IACvC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEjC,mDAAmD;IAC5C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE/B,MAAM,IAAI,IAAI;IAOrB,iDAAiD;IACjD,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,0BAA0B;IACnB,WAAW,GAAI,OAAO,UAAU,KAAG,IAAI,CAe5C;CACF"}

package/lib/components/forms/button/button.component.js

@@ -41,6 +41,14 @@ let ButtonComponent = class ButtonComponent {
         this.loading = false;
         /** Make button full width */
         this.fullWidth = false;
+        /** If set, renders as an anchor tag instead of a button */
+        this.href = null;
+        /** Anchor target (only used when href is set) */
+        this.target = null;
+        /** Anchor rel (only used when href is set) */
+        this.rel = null;
+        /** Anchor download (only used when href is set) */
+        this.download = null;
         /** Handle click events */
         this.handleClick = (event) => {
             if (this.isDisabled) {
@@ -72,7 +80,7 @@ ButtonComponent = __decorate([
         selector: 'ml-button',
         template: buttonTemplate,
         styles: buttonStyles,
-        attributes: ['variant', 'size', 'type', 'disabled', 'loading', 'full-width']
+        attributes: ['variant', 'size', 'type', 'disabled', 'loading', 'full-width', 'href', 'target', 'rel', 'download']
     })
 ], ButtonComponent);
 export { ButtonComponent };

package/lib/components/forms/button/button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,6CAgChD"}
+{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,6CAwDhD"}

package/lib/components/forms/button/button.template.js

@@ -1,31 +1,52 @@
 import { html, classMap, when } from '@melodicdev/core';
 export function buttonTemplate(c) {
-    return html `
-		<button
-			type="${c.type}"
-			class=${classMap({
+    const classes = classMap({
         'ml-button': true,
         [`ml-button--${c.variant}`]: true,
         [`ml-button--${c.size}`]: true,
         'ml-button--disabled': c.isDisabled,
         'ml-button--loading': c.loading,
         'ml-button--full-width': c.fullWidth
-    })}
+    });
+    const content = html `
+		${when(c.loading, () => html `
+				<span class="ml-button__spinner">
+					<ml-spinner size="sm"></ml-spinner>
+				</span>
+			`)}
+		<span class="ml-button__content">
+			<slot name="icon-start"></slot>
+			<slot></slot>
+			<slot name="icon-end"></slot>
+		</span>
+	`;
+    if (c.href != null) {
+        return html `
+			<a
+				href=${c.isDisabled ? undefined : c.href}
+				target=${c.target ?? undefined}
+				rel=${c.rel ?? undefined}
+				download=${c.download ?? undefined}
+				class=${classes}
+				role="button"
+				@click=${c.handleClick}
+				aria-disabled=${c.isDisabled ? 'true' : 'false'}
+				aria-busy=${c.loading ? 'true' : 'false'}
+			>
+				${content}
+			</a>
+		`;
+    }
+    return html `
+		<button
+			type="${c.type}"
+			class=${classes}
 			?disabled=${c.isDisabled}
 			@click=${c.handleClick}
 			aria-disabled=${c.isDisabled ? 'true' : 'false'}
 			aria-busy=${c.loading ? 'true' : 'false'}
 		>
-			${when(c.loading, () => html `
-					<span class="ml-button__spinner">
-						<ml-spinner size="sm"></ml-spinner>
-					</span>
-				`)}
-			<span class="ml-button__content">
-				<slot name="icon-start"></slot>
-				<slot></slot>
-				<slot name="icon-end"></slot>
-			</span>
+			${content}
 		</button>
 	`;
 }

package/lib/components/forms/date-picker/calendar.component.d.ts

@@ -9,6 +9,21 @@ export interface CalendarDay {
     isSelected: boolean;
     isDisabled: boolean;
 }
+export interface CalendarMonth {
+    index: number;
+    label: string;
+    isSelected: boolean;
+    isCurrent: boolean;
+    isDisabled: boolean;
+}
+export interface CalendarYear {
+    year: number;
+    isSelected: boolean;
+    isCurrent: boolean;
+    isDisabled: boolean;
+    isPlaceholder: boolean;
+}
+export type CalendarView = 'day' | 'month' | 'year';
 /**
  * ml-calendar - Standalone calendar grid
  *
@@ -16,6 +31,7 @@ export interface CalendarDay {
  * ```html
  * <ml-calendar value="2026-02-08"></ml-calendar>
  * <ml-calendar min="2026-01-01" max="2026-12-31"></ml-calendar>
+ * <ml-calendar min-year="1900" max-year="2030"></ml-calendar>
  * ```
  *
  * @fires ml:select - Emitted when a date is selected. Detail: { value: string }
@@ -28,22 +44,54 @@ export declare class CalendarComponent implements IElementRef, OnInit, OnAttribu
     min: string;
     /** Maximum selectable date (YYYY-MM-DD) */
     max: string;
+    /** Earliest year reachable in the year picker (defaults to currentYear - 120) */
+    minYear: number | string;
+    /** Latest year reachable in the year picker (defaults to currentYear + 10) */
+    maxYear: number | string;
     /** Currently viewed month (0-11) */
     viewMonth: number;
     /** Currently viewed year */
     viewYear: number;
+    /** Which sub-view the calendar is showing */
+    view: CalendarView;
+    /** First year shown on the current page of the year grid */
+    yearPageStart: number;
     onInit(): void;
     onAttributeChange(name: string, _: unknown, newVal: unknown): void;
     private navigateToValue;
     get monthLabel(): string;
+    get yearLabel(): string;
+    get yearRangeLabel(): string;
+    get headerLabel(): string;
     get weekdays(): string[];
+    get resolvedMinYear(): number;
+    get resolvedMaxYear(): number;
     get days(): CalendarDay[];
+    get months(): CalendarMonth[];
+    get years(): CalendarYear[];
+    get canPageYearsBack(): boolean;
+    get canPageYearsForward(): boolean;
     prevYear: () => void;
     nextYear: () => void;
     prevMonth: () => void;
     nextMonth: () => void;
+    headerPrev: () => void;
+    headerNext: () => void;
+    headerPrevFar: () => void;
+    headerNextFar: () => void;
+    prevYearPage: () => void;
+    nextYearPage: () => void;
+    openMonthView: () => void;
+    openYearView: () => void;
+    selectViewMonth: (month: CalendarMonth) => void;
+    selectViewYear: (year: CalendarYear) => void;
     selectDay: (day: CalendarDay) => void;
     goToToday: () => void;
+    handleGridKeyDown: (event: KeyboardEvent) => void;
+    private computeYearPageStart;
+    private selectedMonthForYear;
+    private selectedYear;
+    private isMonthDisabled;
     private isDisabled;
 }
 //# sourceMappingURL=calendar.component.d.ts.map

package/lib/components/forms/date-picker/calendar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAI/E,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACpB;AAeD;;;;;;;;;;GAUG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM,EAAE,iBAAiB;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,oCAAoC;IAC7B,SAAS,SAAyB;IAEzC,4BAA4B;IACrB,QAAQ,SAA4B;IAEpC,MAAM,IAAI,IAAI;IAId,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAMzE,OAAO,CAAC,eAAe;IASvB,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,QAAQ,IAAI,MAAM,EAAE,CAE9B;IAED,IAAW,IAAI,IAAI,WAAW,EAAE,CAiE/B;IAEM,QAAQ,QAAO,IAAI,CAExB;IAEK,QAAQ,QAAO,IAAI,CAExB;IAEK,SAAS,QAAO,IAAI,CAOzB;IAEK,SAAS,QAAO,IAAI,CAOzB;IAEK,SAAS,GAAI,KAAK,WAAW,KAAG,IAAI,CAazC;IAEK,SAAS,QAAO,IAAI,CAezB;IAEF,OAAO,CAAC,UAAU;CAKlB"}
+{"version":3,"file":"calendar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.component.ts"],"names":[],"mappings":"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"}

package/lib/components/forms/date-picker/calendar.component.js

@@ -8,7 +8,11 @@ import { MelodicComponent } from '@melodicdev/core';
 import { calendarTemplate } from './calendar.template.js';
 import { calendarStyles } from './calendar.styles.js';
 const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const YEARS_PER_PAGE = 12;
+const DEFAULT_MIN_YEAR_OFFSET = 120;
+const DEFAULT_MAX_YEAR_OFFSET = 10;
 function toIso(year, month, day) {
     return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
 }
@@ -16,6 +20,16 @@ function todayIso() {
     const d = new Date();
     return toIso(d.getFullYear(), d.getMonth(), d.getDate());
 }
+function parseYear(val) {
+    if (typeof val === 'number' && Number.isFinite(val))
+        return val;
+    if (typeof val === 'string' && val.trim() !== '') {
+        const n = Number.parseInt(val, 10);
+        if (Number.isFinite(n))
+            return n;
+    }
+    return null;
+}
 /**
  * ml-calendar - Standalone calendar grid
  *
@@ -23,6 +37,7 @@ function todayIso() {
  * ```html
  * <ml-calendar value="2026-02-08"></ml-calendar>
  * <ml-calendar min="2026-01-01" max="2026-12-31"></ml-calendar>
+ * <ml-calendar min-year="1900" max-year="2030"></ml-calendar>
  * ```
  *
  * @fires ml:select - Emitted when a date is selected. Detail: { value: string }
@@ -35,10 +50,19 @@ let CalendarComponent = class CalendarComponent {
         this.min = '';
         /** Maximum selectable date (YYYY-MM-DD) */
         this.max = '';
+        /** Earliest year reachable in the year picker (defaults to currentYear - 120) */
+        this.minYear = '';
+        /** Latest year reachable in the year picker (defaults to currentYear + 10) */
+        this.maxYear = '';
         /** Currently viewed month (0-11) */
         this.viewMonth = new Date().getMonth();
         /** Currently viewed year */
         this.viewYear = new Date().getFullYear();
+        /** Which sub-view the calendar is showing */
+        this.view = 'day';
+        /** First year shown on the current page of the year grid */
+        this.yearPageStart = 0;
+        // ── Navigation ──────────────────────────────────────────────────────────
         this.prevYear = () => {
             this.viewYear--;
         };
@@ -63,11 +87,73 @@ let CalendarComponent = class CalendarComponent {
                 this.viewMonth++;
             }
         };
+        this.headerPrev = () => {
+            if (this.view === 'year')
+                this.prevYearPage();
+            else if (this.view === 'month')
+                this.prevYear();
+            else
+                this.prevMonth();
+        };
+        this.headerNext = () => {
+            if (this.view === 'year')
+                this.nextYearPage();
+            else if (this.view === 'month')
+                this.nextYear();
+            else
+                this.nextMonth();
+        };
+        this.headerPrevFar = () => {
+            if (this.view === 'year')
+                this.prevYearPage();
+            else
+                this.prevYear();
+        };
+        this.headerNextFar = () => {
+            if (this.view === 'year')
+                this.nextYearPage();
+            else
+                this.nextYear();
+        };
+        this.prevYearPage = () => {
+            const next = this.yearPageStart - YEARS_PER_PAGE;
+            const minPage = this.computeYearPageStart(this.resolvedMinYear);
+            this.yearPageStart = Math.max(next, minPage);
+        };
+        this.nextYearPage = () => {
+            const next = this.yearPageStart + YEARS_PER_PAGE;
+            const maxPage = this.computeYearPageStart(this.resolvedMaxYear);
+            this.yearPageStart = Math.min(next, maxPage);
+        };
+        // ── View switching ──────────────────────────────────────────────────────
+        this.openMonthView = () => {
+            this.view = this.view === 'month' ? 'day' : 'month';
+        };
+        this.openYearView = () => {
+            if (this.view === 'year') {
+                this.view = 'day';
+                return;
+            }
+            this.yearPageStart = this.computeYearPageStart(this.viewYear);
+            this.view = 'year';
+        };
+        this.selectViewMonth = (month) => {
+            if (month.isDisabled)
+                return;
+            this.viewMonth = month.index;
+            this.view = 'day';
+        };
+        this.selectViewYear = (year) => {
+            if (year.isDisabled)
+                return;
+            this.viewYear = year.year;
+            this.view = 'month';
+        };
+        // ── Day selection ───────────────────────────────────────────────────────
         this.selectDay = (day) => {
             if (day.isDisabled)
                 return;
             this.value = day.iso;
-            // Navigate to the selected day's month if it's not the current view
             this.viewMonth = day.month;
             this.viewYear = day.year;
             this.elementRef.dispatchEvent(new CustomEvent('ml:select', {
@@ -80,6 +166,7 @@ let CalendarComponent = class CalendarComponent {
             const now = new Date();
             this.viewMonth = now.getMonth();
             this.viewYear = now.getFullYear();
+            this.view = 'day';
             const iso = todayIso();
             if (!this.isDisabled(iso)) {
                 this.value = iso;
@@ -90,13 +177,62 @@ let CalendarComponent = class CalendarComponent {
                 }));
             }
         };
+        // ── Keyboard navigation ─────────────────────────────────────────────────
+        this.handleGridKeyDown = (event) => {
+            const key = event.key;
+            if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'ArrowUp' && key !== 'ArrowDown' && key !== 'Home' && key !== 'End') {
+                return;
+            }
+            const target = event.target;
+            if (!target || target.tagName !== 'BUTTON')
+                return;
+            const grid = target.closest('.ml-calendar__grid, .ml-calendar__cell-grid');
+            if (!grid)
+                return;
+            const cells = Array.from(grid.querySelectorAll('button:not([disabled])')).filter((el) => el.tabIndex !== -1);
+            if (cells.length === 0)
+                return;
+            const idx = cells.indexOf(target);
+            if (idx === -1)
+                return;
+            const cols = this.view === 'day' ? 7 : 3;
+            let nextIdx = idx;
+            switch (key) {
+                case 'ArrowLeft':
+                    nextIdx = idx - 1;
+                    break;
+                case 'ArrowRight':
+                    nextIdx = idx + 1;
+                    break;
+                case 'ArrowUp':
+                    nextIdx = idx - cols;
+                    break;
+                case 'ArrowDown':
+                    nextIdx = idx + cols;
+                    break;
+                case 'Home':
+                    nextIdx = 0;
+                    break;
+                case 'End':
+                    nextIdx = cells.length - 1;
+                    break;
+            }
+            if (nextIdx < 0 || nextIdx >= cells.length) {
+                event.preventDefault();
+                return;
+            }
+            event.preventDefault();
+            cells[nextIdx].focus();
+        };
     }
     onInit() {
         this.navigateToValue();
+        this.yearPageStart = this.computeYearPageStart(this.viewYear);
     }
     onAttributeChange(name, _, newVal) {
         if (name === 'value' && newVal) {
             this.navigateToValue();
+            this.yearPageStart = this.computeYearPageStart(this.viewYear);
         }
     }
     navigateToValue() {
@@ -109,11 +245,32 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     get monthLabel() {
-        return `${MONTH_NAMES[this.viewMonth]} ${this.viewYear}`;
+        return MONTH_NAMES[this.viewMonth];
+    }
+    get yearLabel() {
+        return String(this.viewYear);
+    }
+    get yearRangeLabel() {
+        return `${this.yearPageStart} – ${this.yearPageStart + YEARS_PER_PAGE - 1}`;
+    }
+    get headerLabel() {
+        if (this.view === 'year')
+            return this.yearRangeLabel;
+        if (this.view === 'month')
+            return this.yearLabel;
+        return `${this.monthLabel} ${this.viewYear}`;
     }
     get weekdays() {
         return WEEKDAYS;
     }
+    get resolvedMinYear() {
+        const parsed = parseYear(this.minYear);
+        return parsed ?? new Date().getFullYear() - DEFAULT_MIN_YEAR_OFFSET;
+    }
+    get resolvedMaxYear() {
+        const parsed = parseYear(this.maxYear);
+        return parsed ?? new Date().getFullYear() + DEFAULT_MAX_YEAR_OFFSET;
+    }
     get days() {
         const year = this.viewYear;
         const month = this.viewMonth;
@@ -175,6 +332,77 @@ let CalendarComponent = class CalendarComponent {
         }
         return result;
     }
+    get months() {
+        const selectedMonth = this.selectedMonthForYear(this.viewYear);
+        const now = new Date();
+        return MONTH_NAMES_SHORT.map((label, index) => ({
+            index,
+            label,
+            isSelected: selectedMonth === index,
+            isCurrent: now.getFullYear() === this.viewYear && now.getMonth() === index,
+            isDisabled: this.isMonthDisabled(this.viewYear, index)
+        }));
+    }
+    get years() {
+        const result = [];
+        const selectedYear = this.selectedYear();
+        const now = new Date().getFullYear();
+        const minY = this.resolvedMinYear;
+        const maxY = this.resolvedMaxYear;
+        for (let i = 0; i < YEARS_PER_PAGE; i++) {
+            const year = this.yearPageStart + i;
+            const inRange = year >= minY && year <= maxY;
+            result.push({
+                year,
+                isSelected: selectedYear === year,
+                isCurrent: year === now,
+                isDisabled: !inRange,
+                isPlaceholder: !inRange && (year < minY || year > maxY)
+            });
+        }
+        return result;
+    }
+    get canPageYearsBack() {
+        return this.yearPageStart > this.resolvedMinYear;
+    }
+    get canPageYearsForward() {
+        return this.yearPageStart + YEARS_PER_PAGE - 1 < this.resolvedMaxYear;
+    }
+    // ── Helpers ─────────────────────────────────────────────────────────────
+    computeYearPageStart(year) {
+        const minY = this.resolvedMinYear;
+        return minY + Math.floor((year - minY) / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+    }
+    selectedMonthForYear(year) {
+        if (!this.value)
+            return null;
+        const parts = this.value.split('-');
+        if (parts.length !== 3)
+            return null;
+        const y = Number.parseInt(parts[0], 10);
+        if (y !== year)
+            return null;
+        return Number.parseInt(parts[1], 10) - 1;
+    }
+    selectedYear() {
+        if (!this.value)
+            return null;
+        const parts = this.value.split('-');
+        if (parts.length !== 3)
+            return null;
+        return Number.parseInt(parts[0], 10);
+    }
+    isMonthDisabled(year, month) {
+        // A month is disabled only if its entire range falls outside min/max.
+        const lastDay = new Date(year, month + 1, 0).getDate();
+        const monthEnd = toIso(year, month, lastDay);
+        const monthStart = toIso(year, month, 1);
+        if (this.min && monthEnd < this.min)
+            return true;
+        if (this.max && monthStart > this.max)
+            return true;
+        return false;
+    }
     isDisabled(iso) {
         if (this.min && iso < this.min)
             return true;
@@ -188,7 +416,7 @@ CalendarComponent = __decorate([
         selector: 'ml-calendar',
         template: calendarTemplate,
         styles: calendarStyles,
-        attributes: ['value', 'min', 'max']
+        attributes: ['value', 'min', 'max', 'min-year', 'max-year']
     })
 ], CalendarComponent);
 export { CalendarComponent };

package/lib/components/forms/date-picker/calendar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAqP1B,CAAC"}
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA2V1B,CAAC"}

package/lib/components/forms/date-picker/calendar.styles.js

@@ -7,10 +7,28 @@ export const calendarStyles = () => css `
 		--ml-calendar-width: 280px;
 		--ml-calendar-font-family: var(--ml-font-sans);
 
-		/* --- Month label --- */
+		/* --- Month/year title --- */
 		--ml-calendar-month-font-size: var(--ml-text-sm);
 		--ml-calendar-month-font-weight: var(--ml-font-semibold);
 		--ml-calendar-month-color: var(--ml-color-text);
+		--ml-calendar-title-btn-padding-x: var(--ml-space-1-5);
+		--ml-calendar-title-btn-padding-y: var(--ml-space-1);
+		--ml-calendar-title-btn-border-radius: var(--ml-radius-md);
+		--ml-calendar-title-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-title-btn-hover-color: var(--ml-color-text);
+
+		/* --- Month/year cells --- */
+		--ml-calendar-cell-font-size: var(--ml-text-sm);
+		--ml-calendar-cell-font-weight: var(--ml-font-regular);
+		--ml-calendar-cell-color: var(--ml-color-text);
+		--ml-calendar-cell-border-radius: var(--ml-radius-md);
+		--ml-calendar-cell-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-cell-selected-bg: var(--ml-color-primary);
+		--ml-calendar-cell-selected-color: var(--ml-color-text-inverse);
+		--ml-calendar-cell-selected-font-weight: var(--ml-font-semibold);
+		--ml-calendar-cell-selected-hover-bg: var(--ml-color-primary-hover);
+		--ml-calendar-cell-current-font-weight: var(--ml-font-semibold);
+		--ml-calendar-cell-height: 3rem;
 
 		/* --- Nav buttons --- */
 		--ml-calendar-nav-size: 2rem;
@@ -84,10 +102,94 @@ export const calendarStyles = () => css `
 		gap: 0;
 	}
 
-	.ml-calendar__month-label {
+	.ml-calendar__title {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-1);
+	}
+
+	.ml-calendar__title-btn {
+		border: none;
+		background: none;
+		padding: var(--ml-calendar-title-btn-padding-y) var(--ml-calendar-title-btn-padding-x);
+		border-radius: var(--ml-calendar-title-btn-border-radius);
+		font-family: inherit;
 		font-size: var(--ml-calendar-month-font-size);
 		font-weight: var(--ml-calendar-month-font-weight);
 		color: var(--ml-calendar-month-color);
+		cursor: pointer;
+		transition: background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing), color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
+	}
+
+	.ml-calendar__title-btn:hover {
+		background-color: var(--ml-calendar-title-btn-hover-bg);
+		color: var(--ml-calendar-title-btn-hover-color);
+	}
+
+	.ml-calendar__title-btn:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-calendar-focus-shadow);
+	}
+
+	.ml-calendar__title-btn--wide {
+		min-width: 0;
+	}
+
+	/* Month / year cell grid */
+	.ml-calendar__cell-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: var(--ml-space-1);
+		padding: var(--ml-space-1) 0;
+	}
+
+	.ml-calendar__cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: var(--ml-calendar-cell-height);
+		border: none;
+		border-radius: var(--ml-calendar-cell-border-radius);
+		background: none;
+		font-family: inherit;
+		font-size: var(--ml-calendar-cell-font-size);
+		font-weight: var(--ml-calendar-cell-font-weight);
+		color: var(--ml-calendar-cell-color);
+		cursor: pointer;
+		padding: 0;
+		transition:
+			background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing),
+			color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
+	}
+
+	.ml-calendar__cell:hover:not(:disabled):not(.ml-calendar__cell--selected) {
+		background-color: var(--ml-calendar-cell-hover-bg);
+	}
+
+	.ml-calendar__cell:focus-visible {
+		outline: none;
+		box-shadow: var(--ml-calendar-focus-shadow);
+		z-index: 1;
+	}
+
+	.ml-calendar__cell--current {
+		font-weight: var(--ml-calendar-cell-current-font-weight);
+	}
+
+	.ml-calendar__cell--selected {
+		background-color: var(--ml-calendar-cell-selected-bg);
+		color: var(--ml-calendar-cell-selected-color);
+		font-weight: var(--ml-calendar-cell-selected-font-weight);
+	}
+
+	.ml-calendar__cell--selected:hover:not(:disabled) {
+		background-color: var(--ml-calendar-cell-selected-hover-bg);
+	}
+
+	.ml-calendar__cell--disabled,
+	.ml-calendar__cell:disabled {
+		opacity: var(--ml-calendar-disabled-opacity);
+		cursor: not-allowed;
 	}
 
 	.ml-calendar__nav {

package/lib/components/forms/date-picker/calendar.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,yBAAyB,CAAC;AAE9E,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CAyDpD"}
+{"version":3,"file":"calendar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA4C,MAAM,yBAAyB,CAAC;AAqF3G,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CAsEpD"}