@slotted/angular 0.1.0-beta.3 → 0.1.0-beta.5

package/fesm2022/slotted-angular-calendar.mjs

@@ -185,6 +185,9 @@ class SlCalendar {
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     defaultView = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    /** What a choice is: a day, or a month of a year. Defaults to `day`. */
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
     weekNumbers = input(undefined, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
     fixedWeeks = input(undefined, { ...(ngDevMode ? { debugName: "fixedWeeks" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
     outsideDays = input(undefined, /* @ts-ignore */
@@ -248,8 +251,18 @@ class SlCalendar {
     ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
     focused = computed(() => this.focusedDate() ?? this.ownFocused(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /**
+     * Under `granularity="month"` the months of a year are where a choice is
+     * made: the calendar opens there and never goes below it, so a view asked
+     * for as `day` is read as `month`.
+     */
+    monthly = computed(() => this.granularity() === 'month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthly" }] : /* istanbul ignore next */ []));
     /** Which grid is showing. Public, so a template reaches it through `exportAs`. */
-    currentView = computed(() => this.view() ?? this.ownView(), /* @ts-ignore */
+    currentView = computed(() => {
+        const asked = this.view() ?? this.ownView();
+        return this.monthly() && asked === 'day' ? 'month' : asked;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
     resolvedMonths = computed(() => Math.max(1, this.months() ?? this.defaults.months), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedMonths" }] : /* istanbul ignore next */ []));
@@ -339,7 +352,7 @@ class SlCalendar {
     }
     ngOnInit() {
         this.ownValue.set(this.defaultValue() ?? null);
-        this.ownView.set(this.defaultView() ?? 'day');
+        this.ownView.set(this.defaultView() ?? (this.monthly() ? 'month' : 'day'));
         this.today.set(todayIn(this.timeZone() ?? this.defaults.timeZone));
         const start = this.startingDate();
         this.ownFocused.set(start);
@@ -347,7 +360,9 @@ class SlCalendar {
     }
     /** Puts focus on the cell holding the roving tab stop. */
     focus() {
-        this.element.querySelector('[data-part="day"][tabindex="0"]')?.focus();
+        this.element
+            .querySelector('[data-part="day"][tabindex="0"], [data-part="period"][tabindex="0"]')
+            ?.focus();
     }
     /** Moves the reader to a date, paging the grid to reach it. */
     focusDate(date) {
@@ -430,6 +445,36 @@ class SlCalendar {
         this.requestValue(nextValue(date, this.held(), this.selectionMode()), reason, source);
         this.requestFocused(date, reason, source);
     }
+    /** A month cell's name: the month and the year, which the cell alone does not say. */
+    monthLabel(month) {
+        return this.format().monthYear(plainDate(this.focused().year, month, 1));
+    }
+    /** Whether the value's month is this cell of the year on screen. */
+    heldMonth(month) {
+        const held = this.held();
+        if (held === null || Array.isArray(held) || isRange(held))
+            return false;
+        return held.year === this.focused().year && held.month === month;
+    }
+    /**
+     * A month the bounds leave no day of. The bounds are days, so a month is
+     * refused only when it ends before `min` or starts after `max`.
+     */
+    monthUnavailable(month, year = this.focused().year) {
+        const at = year * 12 + month;
+        const min = this.min();
+        const max = this.max();
+        return ((min !== undefined && at < min.year * 12 + min.month) ||
+            (max !== undefined && at > max.year * 12 + max.month));
+    }
+    /** The value of a month cell is the first day of the month. */
+    selectMonth(year, month, reason, source) {
+        if (!this.editable() || this.monthUnavailable(month, year))
+            return;
+        const date = plainDate(year, month, 1);
+        this.requestValue(date, reason, source);
+        this.requestFocused(date, reason, source);
+    }
     /** The reader moves with the page rather than staying behind it. */
     turnPage(direction, source) {
         const focused = this.focused();
@@ -471,6 +516,43 @@ class SlCalendar {
             consume();
             this.requestFocused(next, 'keyboard', event);
         };
+        /**
+         * The months of a year, as a grid of four columns: the arrows move one
+         * month or one row, Home and End reach January and December, the page
+         * keys move a year, and Enter or Space chooses. Escape is left alone, so
+         * the surface above the calendar may close on it.
+         */
+        if (this.monthly() && this.currentView() === 'month') {
+            const toMonth = (delta) => {
+                const index = focused.year * 12 + (focused.month - 1) + delta;
+                return plainDate(Math.floor(index / 12), (index % 12) + 1, 1);
+            };
+            switch (event.key) {
+                case forward:
+                    return move(toMonth(1));
+                case backward:
+                    return move(toMonth(-1));
+                case 'ArrowUp':
+                    return move(toMonth(-4));
+                case 'ArrowDown':
+                    return move(toMonth(4));
+                case 'Home':
+                    return move(plainDate(focused.year, 1, 1));
+                case 'End':
+                    return move(plainDate(focused.year, 12, 1));
+                case 'PageUp':
+                    return move(toMonth(-12));
+                case 'PageDown':
+                    return move(toMonth(12));
+                case 'Enter':
+                case ' ':
+                    consume();
+                    this.selectMonth(focused.year, focused.month, 'keyboard', event);
+                    return;
+                default:
+                    break;
+            }
+        }
         switch (event.key) {
             case forward:
                 return move(addDays(focused, 1));
@@ -499,8 +581,9 @@ class SlCalendar {
                    passed on, and no layer is asked to close. */
                 /* In the day view the key is left alone, so a surface above the
                    calendar may still close on it. */
-                if (this.currentView() === 'day')
+                if (this.currentView() === 'day' || (this.monthly() && this.currentView() === 'month')) {
                     return;
+                }
                 consume();
                 this.setView(this.currentView() === 'year' ? 'month' : 'day');
                 return;
@@ -584,7 +667,7 @@ class SlCalendar {
                 this.restoreFocus = false;
                 return;
             }
-            const stop = this.element.querySelector('[data-part="cell"]:not([data-outside-month]) [data-part="day"][tabindex="0"]');
+            const stop = this.element.querySelector('[data-part="cell"]:not([data-outside-month]) [data-part="day"][tabindex="0"], [data-part="period"][tabindex="0"]');
             if (stop !== null) {
                 this.restoreFocus = false;
                 stop.focus();
@@ -598,7 +681,7 @@ class SlCalendar {
         }, { injector: this.injector });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlCalendar, isStandalone: true, selector: "[slCalendar]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focusedDateChange: "focusedDateChange", viewChange: "viewChange", previewChange: "previewChange" }, host: { attributes: { "data-ui": "calendar", "data-part": "root" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-view": "currentView()", "attr.data-calendar": "resolvedCalendar()", "attr.data-months": "resolvedMonths() > 1 ? resolvedMonths() : null", "attr.data-week-numbers": "resolvedWeekNumbers() ? '' : null", "attr.data-disabled": "disabled() === true ? '' : null", "attr.data-readonly": "readOnly() === true ? '' : null", "attr.data-invalid": "invalid() === true ? '' : null" } }, exportAs: ["slCalendar"], ngImport: i0, template: `<div data-part="header">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlCalendar, isStandalone: true, selector: "[slCalendar]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", isSignal: true, isRequired: false, transformFunction: null }, outsideDays: { classPropertyName: "outsideDays", publicName: "outsideDays", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focusedDateChange: "focusedDateChange", viewChange: "viewChange", previewChange: "previewChange" }, host: { attributes: { "data-ui": "calendar", "data-part": "root" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-view": "currentView()", "attr.data-calendar": "resolvedCalendar()", "attr.data-months": "resolvedMonths() > 1 ? resolvedMonths() : null", "attr.data-week-numbers": "resolvedWeekNumbers() ? '' : null", "attr.data-disabled": "disabled() === true ? '' : null", "attr.data-readonly": "readOnly() === true ? '' : null", "attr.data-invalid": "invalid() === true ? '' : null" } }, exportAs: ["slCalendar"], ngImport: i0, template: `<div data-part="header">
       <button
         data-part="previous"
         type="button"
@@ -715,19 +798,40 @@ class SlCalendar {
         </div>
       }
       @case ('month') {
-        <div data-part="months">
-          @for (name of monthNames(); track $index) {
-            <button
-              data-part="period"
-              type="button"
-              [attr.data-selected]="focused().month === $index + 1 ? '' : null"
-              [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
-              (click)="pickMonth($index + 1, $event)"
-            >
-              {{ name }}
-            </button>
-          }
-        </div>
+        @if (monthly()) {
+          <div data-part="months">
+            @for (name of monthNames(); track $index) {
+              <button
+                data-part="period"
+                type="button"
+                [attr.aria-label]="monthLabel($index + 1)"
+                [attr.data-selected]="heldMonth($index + 1) ? '' : null"
+                [attr.aria-selected]="heldMonth($index + 1) ? 'true' : null"
+                [attr.aria-disabled]="monthUnavailable($index + 1) ? 'true' : null"
+                [attr.data-unavailable]="monthUnavailable($index + 1) ? '' : null"
+                [attr.data-focused]="focused().month === $index + 1 ? '' : null"
+                [tabindex]="focused().month === $index + 1 ? 0 : -1"
+                (click)="selectMonth(focused().year, $index + 1, 'pointer', $event)"
+              >
+                {{ name }}
+              </button>
+            }
+          </div>
+        } @else {
+          <div data-part="months">
+            @for (name of monthNames(); track $index) {
+              <button
+                data-part="period"
+                type="button"
+                [attr.data-selected]="focused().month === $index + 1 ? '' : null"
+                [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
+                (click)="pickMonth($index + 1, $event)"
+              >
+                {{ name }}
+              </button>
+            }
+          </div>
+        }
       }
       @default {
         <div data-part="years">
@@ -865,19 +969,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
       }
       @case ('month') {
-        <div data-part="months">
-          @for (name of monthNames(); track $index) {
-            <button
-              data-part="period"
-              type="button"
-              [attr.data-selected]="focused().month === $index + 1 ? '' : null"
-              [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
-              (click)="pickMonth($index + 1, $event)"
-            >
-              {{ name }}
-            </button>
-          }
-        </div>
+        @if (monthly()) {
+          <div data-part="months">
+            @for (name of monthNames(); track $index) {
+              <button
+                data-part="period"
+                type="button"
+                [attr.aria-label]="monthLabel($index + 1)"
+                [attr.data-selected]="heldMonth($index + 1) ? '' : null"
+                [attr.aria-selected]="heldMonth($index + 1) ? 'true' : null"
+                [attr.aria-disabled]="monthUnavailable($index + 1) ? 'true' : null"
+                [attr.data-unavailable]="monthUnavailable($index + 1) ? '' : null"
+                [attr.data-focused]="focused().month === $index + 1 ? '' : null"
+                [tabindex]="focused().month === $index + 1 ? 0 : -1"
+                (click)="selectMonth(focused().year, $index + 1, 'pointer', $event)"
+              >
+                {{ name }}
+              </button>
+            }
+          </div>
+        } @else {
+          <div data-part="months">
+            @for (name of monthNames(); track $index) {
+              <button
+                data-part="period"
+                type="button"
+                [attr.data-selected]="focused().month === $index + 1 ? '' : null"
+                [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
+                (click)="pickMonth($index + 1, $event)"
+              >
+                {{ name }}
+              </button>
+            }
+          </div>
+        }
       }
       @default {
         <div data-part="years">
@@ -906,7 +1031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-invalid]': "invalid() === true ? '' : null",
                         '(keydown)': 'onKeyDown($event)',
                     }, styles: ["@layer slotted.components{[data-ui=calendar][data-part=root]{container-type:inline-size;container-name:slotted-calendar;--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_cell-size: var(--slotted-calendar-cell-size, var(--slotted-control-height-md, 34px));--_columns: 7;--_months: 1;--_month-gap: var(--slotted-space-6, 1rem);--_week-number-columns: 0;--_grid-size: calc(var(--_cell-size) * (var(--_columns) + var(--_week-number-columns)));background-color:var(--slotted-calendar-background, transparent);box-sizing:border-box;color:var(--slotted-calendar-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);--_heading-floor: calc(20ch + 3 * var(--_icon-size) + 4 * var(--_gap));inline-size:max(calc(var(--_grid-size) * var(--_months) + var(--_month-gap) * (var(--_months) - 1)),var(--_heading-floor));max-inline-size:100%}[data-ui=calendar][data-part=root][data-week-numbers]{--_week-number-columns: .75}[data-ui=calendar][data-part=root][data-months=\"2\"]{--_months: 2}[data-ui=calendar][data-part=root][data-months=\"3\"]{--_months: 3}[data-ui=calendar] [data-part=header],[data-ui=calendar] [data-part=grids],[data-ui=calendar] [data-part=months],[data-ui=calendar] [data-part=years]{--_cell-size: clamp( var(--slotted-target-min, 24px), calc(100cqi / (var(--_columns) + var(--_week-number-columns)) / var(--_months)), var(--slotted-calendar-cell-size, var(--slotted-control-height-md, 34px)) )}[data-ui=calendar] [data-part=header]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);inline-size:100%;justify-content:space-between}[data-ui=calendar] [data-part=heading]{--slotted-icon-size: var(--_icon-size);appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-calendar-radius, var(--slotted-control-radius, 4px));color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:var(--slotted-space-2, .25rem);font:inherit;font-weight:var(--slotted-font-weight-semibold, 600);flex:1 1 auto;justify-content:safe center;min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-2, .25rem);overflow:hidden;white-space:nowrap;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=previous],[data-ui=calendar] [data-part=next]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_cell-size);border:0;border-radius:var(--slotted-calendar-radius, var(--slotted-control-radius, 4px));color:var(--slotted-calendar-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_cell-size);justify-content:center;padding:0;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=previous]>[data-ui=icon]{rotate:180deg}[data-ui=calendar] [data-part=grids]{display:flex;flex-wrap:wrap;gap:var(--_month-gap);justify-content:center}[data-ui=calendar] [data-part=grid]{border-collapse:collapse;table-layout:fixed}[data-ui=calendar] [data-part=grid-caption]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=calendar][data-part=root]:is([data-months=\"2\"],[data-months=\"3\"]) [data-part=grid-caption]{block-size:auto;clip-path:none;color:var(--slotted-calendar-weekday-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);inline-size:auto;overflow:visible;padding-block-end:var(--slotted-space-2, .25rem);position:static}[data-ui=calendar] [data-part=week-header]{block-size:var(--_cell-size);color:var(--slotted-calendar-weekday-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);inline-size:var(--_cell-size);padding:0;text-overflow:clip}[data-ui=calendar] [data-part=week-number]{color:var(--slotted-calendar-week-number-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-regular, 400);inline-size:calc(var(--_cell-size) * .75);padding:0;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-calendar-week-number-border-color, var(--slotted-border-subtle, ButtonBorder))}[data-ui=calendar] [data-part=cell]{padding:0;position:relative}[data-ui=calendar] [data-part=day]{--_inset: var(--slotted-border-width-thin, 1px);align-items:center;block-size:calc(var(--_cell-size) - var(--_inset) * 2);inline-size:calc(var(--_cell-size) - var(--_inset) * 2);margin:var(--_inset);border-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-variant-numeric:tabular-nums;flex-direction:column;gap:var(--slotted-space-1, .125rem);justify-content:center;line-height:1;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=day]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=calendar] [data-part=months],[data-ui=calendar] [data-part=years]{display:grid;gap:var(--slotted-space-2, .25rem);grid-template-columns:repeat(4,1fr);inline-size:calc(var(--_cell-size) * var(--_columns))}[data-ui=calendar] [data-part=period]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_cell-size);border:0;border-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;font:inherit;justify-content:center;padding-inline:var(--slotted-space-2, .25rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=calendar] [data-part=day][data-today]{color:var(--slotted-calendar-today-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=calendar] [data-part=day]:before{background-color:transparent;block-size:var(--slotted-space-2, .25rem);border-radius:var(--slotted-radius-full, 9999px);content:\"\";flex:0 0 auto;inline-size:var(--slotted-space-2, .25rem);order:1}[data-ui=calendar] [data-part=day][data-today]:before{background-color:currentcolor}[data-ui=calendar] [data-part=cell][data-outside-month] [data-part=day]{color:var(--slotted-calendar-outside-color, var(--slotted-text-muted, GrayText))}[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]{color:var(--slotted-calendar-unavailable-color, var(--slotted-disabled-foreground));cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:var(--slotted-border-width-thin, 1px)}[data-ui=calendar] [data-part=cell][data-in-range]:before,[data-ui=calendar] [data-part=cell][data-range-start]:before,[data-ui=calendar] [data-part=cell][data-range-end]:before{background-color:var( --slotted-calendar-range-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent ) );content:\"\";inset:0;position:absolute}[data-ui=calendar] [data-part=cell][data-range-start]:before{border-end-start-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));border-start-start-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px))}[data-ui=calendar] [data-part=cell][data-range-end]:before{border-end-end-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px));border-start-end-radius:var(--slotted-calendar-day-radius, var(--slotted-radius-sm, 4px))}[data-ui=calendar] [data-part=cell][data-range-start]:not([data-range-end]) [data-part=day]{border-end-end-radius:0;border-start-end-radius:0}[data-ui=calendar] [data-part=cell][data-range-end]:not([data-range-start]) [data-part=day]{border-end-start-radius:0;border-start-start-radius:0}[data-ui=calendar] [data-part=cell]:is([data-in-range],[data-range-start],[data-range-end]) [data-part=day]{--_inset: 0px}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]{border-radius:0;color:var(--slotted-calendar-in-range-color, var(--slotted-tone-accent-text))}[data-ui=calendar] [data-part=cell][data-preview]:before{background-color:var( --slotted-calendar-preview-background, color-mix( in oklab, var(--slotted-tone-accent-text) calc(var(--slotted-highlight-tint-opacity, .075) * 50%), transparent ) )}[data-ui=calendar] [data-part=cell][data-preview]:is([data-range-start],[data-range-end]):not([data-selected]) [data-part=day]{box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-calendar-preview-border-color, var(--slotted-tone-accent-border));color:var(--slotted-calendar-in-range-color, var(--slotted-tone-accent-text))}[data-ui=calendar] [data-part=day]:hover:not([data-disabled]),[data-ui=calendar] [data-part=period]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=heading]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=previous]:hover:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=next]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-calendar-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=calendar] [data-part=day]:active:not([data-disabled]),[data-ui=calendar] [data-part=period]:active:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=previous]:active:not(:disabled):not([data-disabled]),[data-ui=calendar] [data-part=next]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-calendar-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]:hover:not([data-disabled]){background-color:var( --slotted-calendar-range-hover-background, var(--slotted-tone-accent-subtle-hover) )}[data-ui=calendar] [data-part=cell][data-in-range] [data-part=day]:active:not([data-disabled]){background-color:var( --slotted-calendar-range-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]:hover:not([data-disabled]),[data-ui=calendar] [data-part=cell][data-unavailable] [data-part=day]:active:not([data-disabled]){background-color:transparent}[data-ui=calendar] [data-part=cell][data-selected] [data-part=day],[data-ui=calendar] [data-part=period][data-selected]{background-color:var(--slotted-calendar-selected-background, var(--slotted-tone-accent-solid));color:var(--slotted-calendar-selected-color, var(--slotted-tone-accent-on-solid));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=calendar] [data-part=day]:focus-visible,[data-ui=calendar] [data-part=period]:focus-visible,[data-ui=calendar] [data-part=heading]:focus-visible,[data-ui=calendar] [data-part=previous]:focus-visible,[data-ui=calendar] [data-part=next]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=calendar][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-calendar-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=calendar][data-part=root][data-invalid] [data-part=day]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=period]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=heading]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=previous]:focus-visible,[data-ui=calendar][data-part=root][data-invalid] [data-part=next]:focus-visible{--_invalid-ring: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-calendar-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) );outline-offset:calc(var(--_invalid-ring) * -1);outline-width:var(--_invalid-ring)}[data-ui=calendar][data-part=root][data-readonly] [data-part=day],[data-ui=calendar][data-part=root][data-readonly] [data-part=period]{cursor:default}[data-ui=calendar][data-part=root][data-disabled]{color:var(--slotted-calendar-disabled-color, var(--slotted-disabled-foreground))}[data-ui=calendar][data-part=root][data-disabled] [data-part=day][data-today]{color:var(--slotted-disabled-foreground)}[data-ui=calendar][data-part=root][data-disabled] [data-part=cell][data-selected] [data-part=day]{background-color:var(--slotted-disabled-background);color:var(--slotted-disabled-foreground)}[data-ui=calendar][data-part=root][data-disabled] [data-part=day],[data-ui=calendar][data-part=root][data-disabled] [data-part=period],[data-ui=calendar][data-part=root][data-disabled] [data-part=previous],[data-ui=calendar][data-part=root][data-disabled] [data-part=next],[data-ui=calendar][data-part=root][data-disabled] [data-part=heading]{cursor:not-allowed}[data-ui=calendar] [data-part=previous]:disabled,[data-ui=calendar] [data-part=next]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}@container slotted-calendar (max-width: 320px){[data-ui=calendar] [data-part=grids]{--_month-gap: var(--slotted-space-4, .5rem)}}@media(forced-colors:active){[data-ui=calendar] [data-part=cell][data-in-range]:before,[data-ui=calendar] [data-part=cell][data-range-start]:before,[data-ui=calendar] [data-part=cell][data-range-end]:before{border-block:var(--slotted-border-width-thin, 1px) solid var(--slotted-calendar-range-border-color, var(--slotted-tone-accent-border))}[data-ui=calendar] [data-part=cell][data-preview]:before{border-block-style:dashed}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], fixedWeeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWeeks", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focusedDateChange: [{ type: i0.Output, args: ["focusedDateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], previewChange: [{ type: i0.Output, args: ["previewChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], focusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedDate", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], fixedWeeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWeeks", required: false }] }], outsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideDays", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focusedDateChange: [{ type: i0.Output, args: ["focusedDateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], previewChange: [{ type: i0.Output, args: ["previewChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.