@slotted/angular 0.1.0-beta.7 → 0.1.0-beta.9

package/fesm2022/slotted-angular-calendar.mjs

@@ -299,6 +299,16 @@ class SlCalendar {
     ...(ngDevMode ? [{ debugName: "weekdayNarrow" }] : /* istanbul ignore next */ []));
     monthNames = computed(() => this.format().monthNames('short'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+    /** Each paging button is named for the step it takes in the view showing. */
+    pageNames = computed(() => {
+        const view = this.currentView();
+        if (view === 'day')
+            return [this.t('previousMonth'), this.t('nextMonth')];
+        if (view === 'month')
+            return [this.t('previousYear'), this.t('nextYear')];
+        return [this.t('previousYears'), this.t('nextYears')];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageNames" }] : /* istanbul ignore next */ []));
     years = computed(() => yearPage(this.focused().year, YEAR_PAGE), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
     shownMonths = computed(() => visibleMonths(this.page(), this.resolvedMonths()), /* @ts-ignore */
@@ -681,11 +691,12 @@ 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 }, 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">
+    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-ui-calendar": "", "data-part": "root", "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" data-part-header="">
       <button
         data-part="previous"
+        data-part-previous=""
         type="button"
-        [attr.aria-label]="t('previous')"
+        [attr.aria-label]="pageNames()[0]"
         [disabled]="!editable()"
         (click)="turnPage(-1, $event)"
       >
@@ -697,6 +708,7 @@ class SlCalendar {
       -->
       <button
         data-part="heading"
+        data-part-heading=""
         type="button"
         aria-live="polite"
         [attr.id]="headingId"
@@ -710,8 +722,9 @@ class SlCalendar {
       </button>
       <button
         data-part="next"
+        data-part-next=""
         type="button"
-        [attr.aria-label]="t('next')"
+        [attr.aria-label]="pageNames()[1]"
         [disabled]="!editable()"
         (click)="turnPage(1, $event)"
       >
@@ -721,21 +734,31 @@ class SlCalendar {
 
     @switch (currentView()) {
       @case ('day') {
-        <div data-part="grids">
+        <div data-part="grids" data-part-grids="">
           @for (month of shownMonths(); track month.year * 12 + month.month) {
-            <table data-part="grid" role="grid" [attr.aria-labelledby]="headingId">
-              <caption data-part="grid-caption">
+            <table
+              data-part="grid"
+              data-part-grid=""
+              role="grid"
+              [attr.aria-labelledby]="headingId"
+            >
+              <caption data-part="grid-caption" data-part-grid-caption="">
                 {{
                   captionOf(month)
                 }}
               </caption>
               <thead>
-                <tr data-part="week-headers">
+                <tr data-part="week-headers" data-part-week-headers="">
                   @if (resolvedWeekNumbers()) {
-                    <th data-part="week-number" aria-hidden="true"></th>
+                    <th data-part="week-number" data-part-week-number="" aria-hidden="true"></th>
                   }
                   @for (name of weekdayNarrow(); track $index) {
-                    <th data-part="week-header" scope="col" [attr.abbr]="weekdayLong()[$index]">
+                    <th
+                      data-part="week-header"
+                      data-part-week-header=""
+                      scope="col"
+                      [attr.abbr]="weekdayLong()[$index]"
+                    >
                       {{ name }}
                     </th>
                   }
@@ -743,9 +766,11 @@ class SlCalendar {
               </thead>
               <tbody>
                 @for (week of weeksOf(month); track week.weekNumber) {
-                  <tr data-part="week">
+                  <tr data-part="week" data-part-week="">
                     @if (resolvedWeekNumbers()) {
-                      <th data-part="week-number" scope="row">{{ week.weekNumber }}</th>
+                      <th data-part="week-number" data-part-week-number="" scope="row">
+                        {{ week.weekNumber }}
+                      </th>
                     }
                     @for (
                       day of week.days;
@@ -757,6 +782,7 @@ class SlCalendar {
                            digits under it. -->
                       <td
                         data-part="cell"
+                        data-part-cell=""
                         [attr.data-outside-month]="day.outsideMonth ? '' : null"
                         [attr.data-unavailable]="
                           !drawn(day) ? null : unavailable(day.date) ? '' : null
@@ -776,6 +802,7 @@ class SlCalendar {
                         @if (drawn(day)) {
                           <span
                             data-part="day"
+                            data-part-day=""
                             role="button"
                             [attr.data-today]="isToday(day.date) ? '' : null"
                             [attr.aria-selected]="chosen(day.date) ? 'true' : null"
@@ -799,10 +826,11 @@ class SlCalendar {
       }
       @case ('month') {
         @if (monthly()) {
-          <div data-part="months">
+          <div data-part="months" data-part-months="">
             @for (name of monthNames(); track $index) {
               <button
                 data-part="period"
+                data-part-period=""
                 type="button"
                 [attr.aria-label]="monthLabel($index + 1)"
                 [attr.data-selected]="heldMonth($index + 1) ? '' : null"
@@ -818,10 +846,11 @@ class SlCalendar {
             }
           </div>
         } @else {
-          <div data-part="months">
+          <div data-part="months" data-part-months="">
             @for (name of monthNames(); track $index) {
               <button
                 data-part="period"
+                data-part-period=""
                 type="button"
                 [attr.data-selected]="focused().month === $index + 1 ? '' : null"
                 [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
@@ -834,10 +863,11 @@ class SlCalendar {
         }
       }
       @default {
-        <div data-part="years">
+        <div data-part="years" data-part-years="">
           @for (year of years(); track year) {
             <button
               data-part="period"
+              data-part-period=""
               type="button"
               [attr.data-selected]="focused().year === year ? '' : null"
               [attr.aria-selected]="focused().year === year ? 'true' : null"
@@ -848,15 +878,16 @@ class SlCalendar {
           }
         </div>
       }
-    }`, isInline: true, 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"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }`, isInline: true, 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"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCalendar, decorators: [{
             type: Component,
-            args: [{ selector: '[slCalendar]', standalone: true, exportAs: 'slCalendar', imports: [SlGlyph, SlIcon], template: `<div data-part="header">
+            args: [{ selector: '[slCalendar]', standalone: true, exportAs: 'slCalendar', imports: [SlGlyph, SlIcon], template: `<div data-part="header" data-part-header="">
       <button
         data-part="previous"
+        data-part-previous=""
         type="button"
-        [attr.aria-label]="t('previous')"
+        [attr.aria-label]="pageNames()[0]"
         [disabled]="!editable()"
         (click)="turnPage(-1, $event)"
       >
@@ -868,6 +899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       -->
       <button
         data-part="heading"
+        data-part-heading=""
         type="button"
         aria-live="polite"
         [attr.id]="headingId"
@@ -881,8 +913,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </button>
       <button
         data-part="next"
+        data-part-next=""
         type="button"
-        [attr.aria-label]="t('next')"
+        [attr.aria-label]="pageNames()[1]"
         [disabled]="!editable()"
         (click)="turnPage(1, $event)"
       >
@@ -892,21 +925,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
     @switch (currentView()) {
       @case ('day') {
-        <div data-part="grids">
+        <div data-part="grids" data-part-grids="">
           @for (month of shownMonths(); track month.year * 12 + month.month) {
-            <table data-part="grid" role="grid" [attr.aria-labelledby]="headingId">
-              <caption data-part="grid-caption">
+            <table
+              data-part="grid"
+              data-part-grid=""
+              role="grid"
+              [attr.aria-labelledby]="headingId"
+            >
+              <caption data-part="grid-caption" data-part-grid-caption="">
                 {{
                   captionOf(month)
                 }}
               </caption>
               <thead>
-                <tr data-part="week-headers">
+                <tr data-part="week-headers" data-part-week-headers="">
                   @if (resolvedWeekNumbers()) {
-                    <th data-part="week-number" aria-hidden="true"></th>
+                    <th data-part="week-number" data-part-week-number="" aria-hidden="true"></th>
                   }
                   @for (name of weekdayNarrow(); track $index) {
-                    <th data-part="week-header" scope="col" [attr.abbr]="weekdayLong()[$index]">
+                    <th
+                      data-part="week-header"
+                      data-part-week-header=""
+                      scope="col"
+                      [attr.abbr]="weekdayLong()[$index]"
+                    >
                       {{ name }}
                     </th>
                   }
@@ -914,9 +957,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               </thead>
               <tbody>
                 @for (week of weeksOf(month); track week.weekNumber) {
-                  <tr data-part="week">
+                  <tr data-part="week" data-part-week="">
                     @if (resolvedWeekNumbers()) {
-                      <th data-part="week-number" scope="row">{{ week.weekNumber }}</th>
+                      <th data-part="week-number" data-part-week-number="" scope="row">
+                        {{ week.weekNumber }}
+                      </th>
                     }
                     @for (
                       day of week.days;
@@ -928,6 +973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                            digits under it. -->
                       <td
                         data-part="cell"
+                        data-part-cell=""
                         [attr.data-outside-month]="day.outsideMonth ? '' : null"
                         [attr.data-unavailable]="
                           !drawn(day) ? null : unavailable(day.date) ? '' : null
@@ -947,6 +993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         @if (drawn(day)) {
                           <span
                             data-part="day"
+                            data-part-day=""
                             role="button"
                             [attr.data-today]="isToday(day.date) ? '' : null"
                             [attr.aria-selected]="chosen(day.date) ? 'true' : null"
@@ -970,10 +1017,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
       @case ('month') {
         @if (monthly()) {
-          <div data-part="months">
+          <div data-part="months" data-part-months="">
             @for (name of monthNames(); track $index) {
               <button
                 data-part="period"
+                data-part-period=""
                 type="button"
                 [attr.aria-label]="monthLabel($index + 1)"
                 [attr.data-selected]="heldMonth($index + 1) ? '' : null"
@@ -989,10 +1037,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             }
           </div>
         } @else {
-          <div data-part="months">
+          <div data-part="months" data-part-months="">
             @for (name of monthNames(); track $index) {
               <button
                 data-part="period"
+                data-part-period=""
                 type="button"
                 [attr.data-selected]="focused().month === $index + 1 ? '' : null"
                 [attr.aria-selected]="focused().month === $index + 1 ? 'true' : null"
@@ -1005,10 +1054,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       }
       @default {
-        <div data-part="years">
+        <div data-part="years" data-part-years="">
           @for (year of years(); track year) {
             <button
               data-part="period"
+              data-part-period=""
               type="button"
               [attr.data-selected]="focused().year === year ? '' : null"
               [attr.aria-selected]="focused().year === year ? 'true' : null"
@@ -1021,7 +1071,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
     }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'calendar',
+                        'data-ui-calendar': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-view]': 'currentView()',
                         '[attr.data-calendar]': 'resolvedCalendar()',
                         '[attr.data-months]': 'resolvedMonths() > 1 ? resolvedMonths() : null',
@@ -1030,7 +1082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-readonly]': "readOnly() === true ? '' : null",
                         '[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"] }]
+                    }, 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 }] }], 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"] }] } });
 
 /**