@melodicdev/components 1.5.12 → 1.6.0

package/lib/components/data-display/badge/badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA6GvB,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAwHvB,CAAC"}

package/lib/components/data-display/badge/badge.styles.js

@@ -14,6 +14,7 @@ export const badgeStyles = () => css `
 
 		/* ── Badge: dot ── */
 		--ml-badge-dot-size: 0.375rem;
+		--ml-badge-dot-size-xs: 0.3125rem;
 		--ml-badge-dot-size-lg: 0.5rem;
 
 		/* ── Badge: secondary variant ── */
@@ -51,6 +52,16 @@ export const badgeStyles = () => css `
 		height: var(--ml-badge-dot-size-lg);
 	}
 
+	.ml-badge--xs .ml-badge__dot {
+		width: var(--ml-badge-dot-size-xs);
+		height: var(--ml-badge-dot-size-xs);
+	}
+
+	.ml-badge--xs {
+		padding: 1px var(--ml-space-1-5);
+		font-size: 0.6875rem;
+	}
+
 	.ml-badge--sm {
 		padding: 2px var(--ml-space-2);
 		font-size: var(--ml-text-xs);

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"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"}

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

@@ -5,9 +5,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { computePosition, offset, flip, shift } from '../../../utils/positioning/index.js';
 import { autocompleteTemplate } from './autocomplete.template.js';
 import { autocompleteStyles } from './autocomplete.styles.js';
+registerAdapter((el) => el.tagName === 'ML-AUTOCOMPLETE', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => {
+        const e = el;
+        return e.multiple ? (e.values ?? []) : (e.value ?? '');
+    },
+    setValue: (el, value) => {
+        const e = el;
+        if (Array.isArray(value))
+            e.values = value;
+        else
+            e.value = value !== null && value !== undefined ? String(value) : '';
+    },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-autocomplete - Typeahead/autocomplete form component
  *

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEhC,qBAAqB;IACd,KAAK,SAAM;IAElB,mCAAmC;IAC5B,IAAI,SAAM;IAEjB,oBAAoB;IACb,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,0BAA0B;IACnB,aAAa,UAAS;IAE7B,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAiBxC;CACF"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAYpD;;;;;;;;;;;GAWG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEhC,qBAAqB;IACd,KAAK,SAAM;IAElB,mCAAmC;IAC5B,IAAI,SAAM;IAEjB,oBAAoB;IACb,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,0BAA0B;IACnB,aAAa,UAAS;IAE7B,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAiBxC;CACF"}

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

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { checkboxTemplate } from './checkbox.template.js';
 import { checkboxStyles } from './checkbox.styles.js';
+registerAdapter((el) => el.tagName === 'ML-CHECKBOX', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => Boolean(el.checked),
+    setValue: (el, value) => { el.checked = Boolean(value); },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-checkbox - Checkbox input component
  *

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"}