@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.10

package/fesm2022/slotted-angular-date-picker.mjs

@@ -1,4 +1,4 @@
-import { isDateInRange, createDateFormat } from '@slotted/core/date';
+import { isPlainYearMonth, firstDayOf, lastDayOf, isPlainDate, yearMonthOf, isDateInRange, createDateFormat } from '@slotted/core/date';
 import { createDismissableLayer } from '@slotted/core/dismissable-layer';
 import { tabbables } from '@slotted/core/focus';
 import { createPositioner } from '@slotted/core/positioner';
@@ -66,10 +66,23 @@ let sequence = 0;
  * is showing.
  */
 class SlDatePicker {
+    /**
+     * The date, the run or the set; under `granularity="month"`, a
+     * `PlainYearMonth`. Present means the consumer owns it. Its type is the
+     * type `valueChange` reports.
+     */
     value = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     defaultValue = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /**
+     * What a choice is. `month` opens the calendar on the months of a year and
+     * chooses a month cell; the field shows the month and the year; `value`,
+     * `defaultValue`, `min` and `max` are `PlainYearMonth`, `valueChange`
+     * reports one, and `name` submits `YYYY-MM`.
+     */
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
     /** Present means the consumer owns whether the surface is showing. */
     open = input(undefined, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
     defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -143,8 +156,6 @@ class SlDatePicker {
     ...(ngDevMode ? [{ debugName: "ownValue" }] : /* istanbul ignore next */ []));
     view = signal('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
-    positioned = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
     sheet = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
     formDisabled = signal(undefined, /* @ts-ignore */
@@ -165,8 +176,41 @@ class SlDatePicker {
     dismissable = null;
     isOpen = computed(() => this.open() ?? this.ownOpen(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    held = computed(() => this.value() ?? this.ownValue(), /* @ts-ignore */
+    /**
+     * A month is its own value. Under `granularity="month"` the picker holds a
+     * `PlainYearMonth`; the field and the calendar below it hold the first day of
+     * that month, and the bounds become the first day of `min` and the last day
+     * of `max`, so a month the bounds touch is a month the reader may choose.
+     */
+    monthly = computed(() => this.granularity() === 'month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthly" }] : /* istanbul ignore next */ []));
+    held = computed(() => {
+        const value = this.value();
+        return value === undefined ? this.ownValue() : this.toDay(value);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    minDay = computed(() => {
+        const min = this.min();
+        return isPlainYearMonth(min) ? firstDayOf(min) : min;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDay" }] : /* istanbul ignore next */ []));
+    maxDay = computed(() => {
+        const max = this.max();
+        return isPlainYearMonth(max) ? lastDayOf(max) : max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDay" }] : /* istanbul ignore next */ []));
+    /** A month as the day the field and the calendar hold for it. */
+    toDay(value) {
+        if (value === undefined || value === null)
+            return null;
+        return isPlainYearMonth(value) ? firstDayOf(value) : value;
+    }
+    /** What leaves the picker: the month under `month`, the value otherwise. */
+    outward(value) {
+        if (!this.monthly())
+            return value;
+        return (isPlainDate(value) ? yearMonthOf(value) : null);
+    }
     resolvedLocale = computed(() => this.locale() ?? this.appLocale(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
     resolvedTimeZone = computed(() => this.timeZone() ?? this.defaults.timeZone, /* @ts-ignore */
@@ -191,7 +235,8 @@ class SlDatePicker {
      * field around it says, because this control is the only thing that knows.
      */
     resolvedInvalid = computed(() => {
-        const refused = asDates(this.held()).some((date) => !isDateInRange(date, this.min(), this.max()) || this.isDateUnavailable()?.(date) === true);
+        const refused = asDates(this.held()).some((date) => !isDateInRange(date, this.minDay(), this.maxDay()) ||
+            this.isDateUnavailable()?.(date) === true);
         if (refused)
             return true;
         return this.invalid() ?? this.enclosing?.invalid();
@@ -220,7 +265,8 @@ class SlDatePicker {
         if (chosen.length === 0)
             return this.t('choose');
         const format = createDateFormat({ locale: this.resolvedLocale() });
-        return this.t('change', { date: chosen.map((date) => format.describe(date)).join(' – ') });
+        const words = (date) => this.monthly() ? format.monthYear(date) : format.describe(date);
+        return this.t('change', { date: chosen.map(words).join(' – ') });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
     closesOnSelect = computed(() => {
@@ -251,7 +297,7 @@ class SlDatePicker {
     }
     /* ── Forms ─────────────────────────────────────────────────────────── */
     writeValue(value) {
-        this.ownValue.set(value ?? null);
+        this.ownValue.set(this.toDay(value));
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -271,9 +317,9 @@ class SlDatePicker {
      * them with. `required` is left to Angular's own.
      */
     validate(control) {
-        const dates = asDates(control.value ?? null);
-        const min = this.min();
-        const max = this.max();
+        const dates = asDates(this.toDay(control.value));
+        const min = this.minDay();
+        const max = this.maxDay();
         const outside = dates.find((date) => !isDateInRange(date, min, max));
         if (outside !== undefined)
             return { slottedDateRange: { min, max, actual: outside } };
@@ -284,8 +330,8 @@ class SlDatePicker {
     }
     ngOnInit() {
         this.ownOpen.set(this.defaultOpen());
-        this.ownValue.set(this.defaultValue() ?? null);
-        this.view.set(this.defaultView() ?? 'day');
+        this.ownValue.set(this.toDay(this.defaultValue()));
+        this.view.set(this.defaultView() ?? this.lowestView());
         /* A native reset restores the hidden input and tells nothing, so the
            picker would keep the last date chosen in a form that had been reset.
            The value returns to `defaultValue` through `valueChange`, reason
@@ -295,7 +341,7 @@ class SlDatePicker {
         if (form !== null) {
             const onReset = (event) => {
                 if (!this.formBound)
-                    this.commit(this.defaultValue() ?? null, 'programmatic', event);
+                    this.commit(this.toDay(this.defaultValue()), 'programmatic', event);
             };
             form.addEventListener('reset', onReset);
             this.destroyRef.onDestroy(() => form.removeEventListener('reset', onReset));
@@ -370,14 +416,26 @@ class SlDatePicker {
         this.setOpen(false, 'select', request.source);
         this.triggerRef?.nativeElement.focus({ preventScroll: true });
     }
+    /** The lowest view is where a choice is made: the days, or the months. */
+    lowestView() {
+        return this.monthly() ? 'month' : 'day';
+    }
     commit(next, reason, source) {
         let cancelled = false;
         const state = createControllable({
-            controlled: this.value(),
+            controlled: this.value() === undefined ? undefined : this.held(),
             initial: this.held(),
             equals: () => false,
             onRequest: (request) => {
-                this.valueChange.emit(request);
+                /* The request keeps its own `cancel` and `cancelled`, and carries the
+                   months instead of the days under `month`. */
+                const asked = this.monthly()
+                    ? Object.create(request, {
+                        previous: { enumerable: true, value: this.outward(request.previous) },
+                        value: { enumerable: true, value: this.outward(request.value) },
+                    })
+                    : request;
+                this.valueChange.emit(asked);
                 cancelled = request.cancelled;
             },
         });
@@ -386,7 +444,7 @@ class SlDatePicker {
             return;
         if (this.value() === undefined)
             this.ownValue.set(next);
-        this.onChangeFn(next);
+        this.onChangeFn(this.outward(next));
     }
     setOpen(next, reason, source) {
         const state = createControllable({
@@ -410,14 +468,16 @@ class SlDatePicker {
             const anchor = this.element.querySelector('[data-part="control"]') ?? this.element;
             const [side, align] = this.resolvedPlacement().split('-');
             this.positioner = createPositioner(anchor, layer, { align: align ?? 'center', side });
-            void this.positioner.update().then(() => this.positioned.set(true));
+            /* The positioner writes `data-positioned` with the side, on the element, in
+               the task that opened the layer; a binding to say it again was a frame later. */
+            void this.positioner.update();
         }
         /* The dialog takes focus when it opens, on the day that holds the roving
            tab stop: the chosen date, or today. */
         if (this.focusOnOpen) {
             this.focusOnOpen = false;
             layer
-                .querySelector('[data-part="day"][tabindex="0"]')
+                .querySelector('[data-part="day"][tabindex="0"], [data-part="period"][tabindex="0"]')
                 ?.focus({ preventScroll: true });
         }
         const trigger = this.triggerRef?.nativeElement;
@@ -435,7 +495,7 @@ class SlDatePicker {
                  * surface by the time it ran; the decision is taken here, and the layer
                  * is simply not asked to close.
                  */
-                if (request.reason === 'escape' && this.view() !== 'day') {
+                if (request.reason === 'escape' && this.view() !== this.lowestView()) {
                     this.view.set(this.view() === 'year' ? 'month' : 'day');
                     return;
                 }
@@ -451,13 +511,13 @@ class SlDatePicker {
         this.positioner = null;
         this.dismissable?.destroy();
         this.dismissable = null;
-        this.positioned.set(false);
+        this.layer?.nativeElement.removeAttribute('data-positioned');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDatePicker, isStandalone: true, selector: "[slDatePicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", 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 }, 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 }, 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 }, yearPivot: { classPropertyName: "yearPivot", publicName: "yearPivot", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange" }, host: { attributes: { "data-ui": "date-picker", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDatePicker, isStandalone: true, selector: "[slDatePicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", 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 }, 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 }, 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 }, yearPivot: { classPropertyName: "yearPivot", publicName: "yearPivot", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange" }, host: { attributes: { "data-ui": "date-picker", "data-ui-date-picker": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDatePicker), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDatePicker), multi: true },
-        ], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true }], exportAs: ["slDatePicker"], ngImport: i0, template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+        ], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true }], exportAs: ["slDatePicker"], ngImport: i0, template: `<div data-part="control" data-part-control="" (keydown)="onControlKeyDown($event)">
       <div
         slDateField
         #field="slDateField"
@@ -468,8 +528,9 @@ class SlDatePicker {
         [calendar]="resolvedCalendar()"
         [size]="resolvedSize()"
         [variant]="resolvedVariant()"
-        [min]="min()"
-        [max]="max()"
+        [min]="minDay()"
+        [max]="maxDay()"
+        [granularity]="granularity()"
         [isDateUnavailable]="isDateUnavailable()"
         [clearable]="clearable()"
         [name]="name()"
@@ -485,6 +546,7 @@ class SlDatePicker {
           <button
             #trigger
             data-part="trigger"
+            data-part-trigger=""
             type="button"
             aria-haspopup="dialog"
             [attr.aria-label]="triggerLabel()"
@@ -503,13 +565,15 @@ class SlDatePicker {
       <div
         #layer
         data-ui="date-picker"
+        data-ui-date-picker=""
         data-part="positioner"
+        data-part-positioner=""
         data-open
         [attr.data-presentation]="sheet() ? 'sheet' : 'popover'"
-        [attr.data-positioned]="positioned() ? '' : null"
       >
         <div
           data-part="content"
+          data-part-content=""
           role="dialog"
           [attr.id]="contentId"
           [attr.aria-label]="triggerLabel()"
@@ -521,8 +585,9 @@ class SlDatePicker {
             [locale]="resolvedLocale()"
             [timeZone]="resolvedTimeZone()"
             [firstDayOfWeek]="firstDayOfWeek()"
-            [min]="min()"
-            [max]="max()"
+            [min]="minDay()"
+            [max]="maxDay()"
+            [granularity]="granularity()"
             [isDateUnavailable]="isDateUnavailable()"
             [selectionMode]="selectionMode()"
             [months]="months()"
@@ -537,11 +602,11 @@ class SlDatePicker {
           <ng-content select="[slDatePickerFooter]" />
         </div>
       </div>
-    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=date-picker][data-part=root]{display:block;inline-size:100%}[data-ui=date-picker] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui=date-picker][data-part=root][data-size=sm] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui=date-picker][data-part=root][data-size=lg] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui=date-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-date-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;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=date-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=date-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=date-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=date-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-picker] [data-part=trigger]: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=date-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=date-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-picker][data-part=positioner]{position:absolute;inset-block-start:0;box-sizing:border-box;isolation:isolate;pointer-events:none;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));--_enter-distance: var(--slotted-space-2, .25rem);opacity:0;translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=date-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=date-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-date-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-picker-enter-up}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-picker-fade}@keyframes slotted-date-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=date-picker][data-part=positioner],[data-ui=date-picker][data-part=positioner][data-side=top],[data-ui=date-picker][data-part=positioner][data-side=left],[data-ui=date-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-picker-fade}}[data-ui=date-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=date-picker] [data-part=content]{background-color:var(--slotted-date-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-date-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"calendar\" \"footer\";grid-template-columns:auto;padding:var(--slotted-date-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=date-picker] [data-part=content]:has([data-part=presets]){grid-template-areas:\"presets calendar\" \"footer footer\";grid-template-columns:auto auto}[data-ui=date-picker] [data-part=content]>[data-ui=calendar]{grid-area:calendar}[data-ui=date-picker] [data-part=presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);grid-area:presets;padding-inline-end:var(--slotted-space-5, .75rem)}[data-ui=date-picker] [data-part=footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-4, .5rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=date-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=date-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=date-picker][data-part=positioner][data-presentation=sheet] [data-part=content]{border-end-end-radius:0;border-end-start-radius:0;border-inline:0;border-block-end:0;inline-size:100%;justify-content:center}[data-ui=date-picker][data-part=positioner][data-presentation=sheet] [data-part=presets]{border-inline-end:0;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-4, .5rem);padding-inline-end:0}}}\n"], dependencies: [{ kind: "component", type: SlCalendar, selector: "[slCalendar]", inputs: ["value", "defaultValue", "focusedDate", "defaultFocusedDate", "min", "max", "isDateUnavailable", "selectionMode", "months", "view", "defaultView", "weekNumbers", "fixedWeeks", "outsideDays", "locale", "timeZone", "firstDayOfWeek", "calendar", "disabled", "readOnly", "invalid", "messages"], outputs: ["valueChange", "focusedDateChange", "viewChange", "previewChange"], exportAs: ["slCalendar"] }, { kind: "component", type: SlDateField, selector: "[slDateField]", inputs: ["value", "defaultValue", "min", "max", "isDateUnavailable", "locale", "timeZone", "firstDayOfWeek", "yearPivot", "calendar", "size", "variant", "disabled", "readOnly", "invalid", "required", "clearable", "messages", "name", "label", "groupId"], outputs: ["valueChange"], exportAs: ["slDateField"] }, { kind: "directive", type: SlDateFieldEnd, selector: "[slDateFieldEnd]", exportAs: ["slDateFieldEnd"] }, { 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-date-picker][data-part-root]{display:block;inline-size:100%}[data-ui-date-picker] [data-part-control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui-date-picker][data-part-root][data-size=sm] [data-part-control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui-date-picker][data-part-root][data-size=lg] [data-part-control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui-date-picker] [data-part-trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-date-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;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-date-picker] [data-part-trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-date-picker] [data-part-trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-date-picker] [data-part-end]:has(+[data-part-clear]:not([hidden]))>[data-part-trigger]:after{inset-inline-end:0}}[data-ui-date-picker] [data-part-trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-date-picker] [data-part-trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-date-picker] [data-part-trigger]: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-date-picker][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui-date-picker] [data-part-trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui-date-picker][data-part-positioner]{position:absolute;inset-block-start:0;box-sizing:border-box;isolation:isolate;pointer-events:none;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));--_enter-distance: var(--slotted-space-2, .25rem);opacity:0;translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-date-picker][data-part-positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui-date-picker][data-part-positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui-date-picker][data-part-positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui-date-picker][data-part-positioner][data-open][data-positioned]{animation:slotted-date-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-picker-enter-up}[data-ui-date-picker][data-part-positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-picker-fade}@keyframes slotted-date-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui-date-picker][data-part-positioner],[data-ui-date-picker][data-part-positioner][data-side=top],[data-ui-date-picker][data-part-positioner][data-side=left],[data-ui-date-picker][data-part-positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-date-picker][data-part-positioner][data-open][data-positioned],[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=top],[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=left],[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-picker-fade}}[data-ui-date-picker][data-part-positioner][data-detached]{visibility:hidden}[data-ui-date-picker] [data-part-content]{background-color:var(--slotted-date-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-date-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"calendar\" \"footer\";grid-template-columns:auto;padding:var(--slotted-date-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui-date-picker] [data-part-content]:has([data-part-presets]){grid-template-areas:\"presets calendar\" \"footer footer\";grid-template-columns:auto auto}[data-ui-date-picker] [data-part-content]>[data-ui-calendar]{grid-area:calendar}[data-ui-date-picker] [data-part-presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);grid-area:presets;padding-inline-end:var(--slotted-space-5, .75rem)}[data-ui-date-picker] [data-part-footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-4, .5rem)}@media(max-width:480px)and (pointer:coarse){[data-ui-date-picker][data-part-positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui-date-picker][data-part-positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui-date-picker][data-part-positioner][data-presentation=sheet] [data-part-content]{border-end-end-radius:0;border-end-start-radius:0;border-inline:0;border-block-end:0;inline-size:100%;justify-content:center}[data-ui-date-picker][data-part-positioner][data-presentation=sheet] [data-part-presets]{border-inline-end:0;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-4, .5rem);padding-inline-end:0}}}\n"], dependencies: [{ kind: "component", type: SlCalendar, selector: "[slCalendar]", inputs: ["value", "defaultValue", "focusedDate", "defaultFocusedDate", "min", "max", "isDateUnavailable", "selectionMode", "months", "view", "defaultView", "granularity", "weekNumbers", "fixedWeeks", "outsideDays", "locale", "timeZone", "firstDayOfWeek", "calendar", "disabled", "readOnly", "invalid", "messages"], outputs: ["valueChange", "focusedDateChange", "viewChange", "previewChange"], exportAs: ["slCalendar"] }, { kind: "component", type: SlDateField, selector: "[slDateField]", inputs: ["value", "defaultValue", "granularity", "min", "max", "isDateUnavailable", "locale", "timeZone", "firstDayOfWeek", "yearPivot", "calendar", "size", "variant", "disabled", "readOnly", "invalid", "required", "clearable", "messages", "name", "label", "groupId"], outputs: ["valueChange"], exportAs: ["slDateField"] }, { kind: "directive", type: SlDateFieldEnd, selector: "[slDateFieldEnd]", exportAs: ["slDateFieldEnd"] }, { 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: SlDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: '[slDatePicker]', standalone: true, exportAs: 'slDatePicker', imports: [SlCalendar, SlDateField, SlDateFieldEnd, SlGlyph, SlIcon], template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+            args: [{ selector: '[slDatePicker]', standalone: true, exportAs: 'slDatePicker', imports: [SlCalendar, SlDateField, SlDateFieldEnd, SlGlyph, SlIcon], template: `<div data-part="control" data-part-control="" (keydown)="onControlKeyDown($event)">
       <div
         slDateField
         #field="slDateField"
@@ -552,8 +617,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         [calendar]="resolvedCalendar()"
         [size]="resolvedSize()"
         [variant]="resolvedVariant()"
-        [min]="min()"
-        [max]="max()"
+        [min]="minDay()"
+        [max]="maxDay()"
+        [granularity]="granularity()"
         [isDateUnavailable]="isDateUnavailable()"
         [clearable]="clearable()"
         [name]="name()"
@@ -569,6 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
           <button
             #trigger
             data-part="trigger"
+            data-part-trigger=""
             type="button"
             aria-haspopup="dialog"
             [attr.aria-label]="triggerLabel()"
@@ -587,13 +654,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <div
         #layer
         data-ui="date-picker"
+        data-ui-date-picker=""
         data-part="positioner"
+        data-part-positioner=""
         data-open
         [attr.data-presentation]="sheet() ? 'sheet' : 'popover'"
-        [attr.data-positioned]="positioned() ? '' : null"
       >
         <div
           data-part="content"
+          data-part-content=""
           role="dialog"
           [attr.id]="contentId"
           [attr.aria-label]="triggerLabel()"
@@ -605,8 +674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             [locale]="resolvedLocale()"
             [timeZone]="resolvedTimeZone()"
             [firstDayOfWeek]="firstDayOfWeek()"
-            [min]="min()"
-            [max]="max()"
+            [min]="minDay()"
+            [max]="maxDay()"
+            [granularity]="granularity()"
             [isDateUnavailable]="isDateUnavailable()"
             [selectionMode]="selectionMode()"
             [months]="months()"
@@ -626,7 +696,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDatePicker), multi: true },
                     ], host: {
                         'data-ui': 'date-picker',
+                        'data-ui-date-picker': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[attr.data-calendar]': 'resolvedCalendar()',
@@ -635,8 +707,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
                         '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
                         '[attr.data-required]': "resolvedRequired() === true ? '' : null",
-                    }, styles: ["@layer slotted.components{[data-ui=date-picker][data-part=root]{display:block;inline-size:100%}[data-ui=date-picker] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui=date-picker][data-part=root][data-size=sm] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui=date-picker][data-part=root][data-size=lg] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui=date-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-date-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;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=date-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=date-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=date-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=date-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-picker] [data-part=trigger]: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=date-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=date-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-picker][data-part=positioner]{position:absolute;inset-block-start:0;box-sizing:border-box;isolation:isolate;pointer-events:none;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));--_enter-distance: var(--slotted-space-2, .25rem);opacity:0;translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=date-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=date-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-date-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-picker-enter-up}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-picker-fade}@keyframes slotted-date-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=date-picker][data-part=positioner],[data-ui=date-picker][data-part=positioner][data-side=top],[data-ui=date-picker][data-part=positioner][data-side=left],[data-ui=date-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-picker-fade}}[data-ui=date-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=date-picker] [data-part=content]{background-color:var(--slotted-date-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-date-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"calendar\" \"footer\";grid-template-columns:auto;padding:var(--slotted-date-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=date-picker] [data-part=content]:has([data-part=presets]){grid-template-areas:\"presets calendar\" \"footer footer\";grid-template-columns:auto auto}[data-ui=date-picker] [data-part=content]>[data-ui=calendar]{grid-area:calendar}[data-ui=date-picker] [data-part=presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);grid-area:presets;padding-inline-end:var(--slotted-space-5, .75rem)}[data-ui=date-picker] [data-part=footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-4, .5rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=date-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=date-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=date-picker][data-part=positioner][data-presentation=sheet] [data-part=content]{border-end-end-radius:0;border-end-start-radius:0;border-inline:0;border-block-end:0;inline-size:100%;justify-content:center}[data-ui=date-picker][data-part=positioner][data-presentation=sheet] [data-part=presets]{border-inline-end:0;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-4, .5rem);padding-inline-end:0}}}\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 }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", 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 }] }], 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 }] }], 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 }] }], yearPivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPivot", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], layer: [{
+                    }, styles: ["@layer slotted.components{[data-ui-date-picker][data-part-root]{display:block;inline-size:100%}[data-ui-date-picker] [data-part-control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui-date-picker][data-part-root][data-size=sm] [data-part-control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui-date-picker][data-part-root][data-size=lg] [data-part-control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui-date-picker] [data-part-trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-date-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;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-date-picker] [data-part-trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-date-picker] [data-part-trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-date-picker] [data-part-end]:has(+[data-part-clear]:not([hidden]))>[data-part-trigger]:after{inset-inline-end:0}}[data-ui-date-picker] [data-part-trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-date-picker] [data-part-trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-date-picker] [data-part-trigger]: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-date-picker][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui-date-picker] [data-part-trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui-date-picker][data-part-positioner]{position:absolute;inset-block-start:0;box-sizing:border-box;isolation:isolate;pointer-events:none;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));--_enter-distance: var(--slotted-space-2, .25rem);opacity:0;translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-date-picker][data-part-positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui-date-picker][data-part-positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui-date-picker][data-part-positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui-date-picker][data-part-positioner][data-open][data-positioned]{animation:slotted-date-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-picker-enter-up}[data-ui-date-picker][data-part-positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-picker-fade}@keyframes slotted-date-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui-date-picker][data-part-positioner],[data-ui-date-picker][data-part-positioner][data-side=top],[data-ui-date-picker][data-part-positioner][data-side=left],[data-ui-date-picker][data-part-positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-date-picker][data-part-positioner][data-open][data-positioned],[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=top],[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=left],[data-ui-date-picker][data-part-positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-picker-fade}}[data-ui-date-picker][data-part-positioner][data-detached]{visibility:hidden}[data-ui-date-picker] [data-part-content]{background-color:var(--slotted-date-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-date-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"calendar\" \"footer\";grid-template-columns:auto;padding:var(--slotted-date-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui-date-picker] [data-part-content]:has([data-part-presets]){grid-template-areas:\"presets calendar\" \"footer footer\";grid-template-columns:auto auto}[data-ui-date-picker] [data-part-content]>[data-ui-calendar]{grid-area:calendar}[data-ui-date-picker] [data-part-presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);grid-area:presets;padding-inline-end:var(--slotted-space-5, .75rem)}[data-ui-date-picker] [data-part-footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-4, .5rem)}@media(max-width:480px)and (pointer:coarse){[data-ui-date-picker][data-part-positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui-date-picker][data-part-positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui-date-picker][data-part-positioner][data-presentation=sheet] [data-part-content]{border-end-end-radius:0;border-end-start-radius:0;border-inline:0;border-block-end:0;inline-size:100%;justify-content:center}[data-ui-date-picker][data-part-positioner][data-presentation=sheet] [data-part-presets]{border-inline-end:0;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-4, .5rem);padding-inline-end:0}}}\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 }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", 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 }] }], 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 }] }], 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 }] }], yearPivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPivot", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], layer: [{
                 type: ViewChild,
                 args: ['layer']
             }], triggerRef: [{
@@ -656,7 +728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class SlDatePickerPresets {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerPresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDatePickerPresets, isStandalone: true, selector: "[slDatePickerPresets]", host: { attributes: { "data-part": "presets" } }, exportAs: ["slDatePickerPresets"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDatePickerPresets, isStandalone: true, selector: "[slDatePickerPresets]", host: { attributes: { "data-part": "presets", "data-part-presets": "" } }, exportAs: ["slDatePickerPresets"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerPresets, decorators: [{
             type: Directive,
@@ -664,13 +736,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDatePickerPresets]',
                     standalone: true,
                     exportAs: 'slDatePickerPresets',
-                    host: { 'data-part': 'presets' },
+                    host: { 'data-part': 'presets', 'data-part-presets': '' },
                 }]
         }] });
 /** The consumer's own actions, under whatever the surface is holding. */
 class SlDatePickerFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDatePickerFooter, isStandalone: true, selector: "[slDatePickerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDatePickerFooter"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDatePickerFooter, isStandalone: true, selector: "[slDatePickerFooter]", host: { attributes: { "data-part": "footer", "data-part-footer": "" } }, exportAs: ["slDatePickerFooter"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerFooter, decorators: [{
             type: Directive,
@@ -678,7 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slDatePickerFooter]',
                     standalone: true,
                     exportAs: 'slDatePickerFooter',
-                    host: { 'data-part': 'footer' },
+                    host: { 'data-part': 'footer', 'data-part-footer': '' },
                 }]
         }] });