@sectile/vue 0.6.0 → 0.8.0

package/dist/internal/date-picker.d.ts

@@ -1,17 +1,23 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type CalendarMonthValue, type CalendarViewMode } from '@sectile/dom/date-picker';
-import { type DateRange, type DateValue } from '@sectile/dom/date-field';
-import { type DateTimeRange, type DateTimeValue } from '@sectile/dom/date-time-field';
+import { type AllowedComponentProps, type Component, type ComponentCustomProps, type PropType, type SlotsType, type VNodeChild, type VNodeProps } from 'vue';
+import { type CalendarPolicies } from '@sectile/dom/temporal/calendar';
+import { type DatePickerOptions, type PickerPositionOptions, type CalendarMonthValue, type CalendarViewMode } from '@sectile/dom/temporal/date-picker';
+import { type DateRangePickerOptions } from '@sectile/dom/temporal/date-range-picker';
+import { type DateTimePickerOptions } from '@sectile/dom/temporal/date-time-picker';
+import { type DateTimeRangePickerOptions } from '@sectile/dom/temporal/date-time-range-picker';
+import { type DateRange, type DateValue } from '@sectile/dom/temporal/date-field';
+import { type DateTimeRange, type DateTimeValue } from '@sectile/dom/temporal/date-time-field';
 import { type PrimitiveAs } from '../primitive.js';
 export type PickerKind = 'calendar' | 'date' | 'date-range' | 'date-time' | 'date-time-range';
 export type PickerValue = DateValue | DateRange | DateTimeValue | DateTimeRange | null;
+export type PickerValueFor<Kind extends PickerKind> = Kind extends 'calendar' | 'date' ? DateValue | null : Kind extends 'date-range' ? DateRange | null : Kind extends 'date-time' ? DateTimeValue | null : DateTimeRange | null;
+export type PickerPoliciesFor<Kind extends PickerKind> = Kind extends 'calendar' ? CalendarPolicies : Kind extends 'date' ? NonNullable<DatePickerOptions['policies']> : Kind extends 'date-range' ? NonNullable<DateRangePickerOptions['policies']> : Kind extends 'date-time' ? NonNullable<DateTimePickerOptions['policies']> : NonNullable<DateTimeRangePickerOptions['policies']>;
 export type PickerInputPart = 'input' | 'start-input' | 'end-input' | 'date-time-input' | 'date-input' | 'time-input' | 'start-date-time-input' | 'end-date-time-input' | 'start-date-input' | 'end-date-input' | 'start-time-input' | 'end-time-input';
 export type PickerNavigationUnit = 'week' | 'month' | 'year';
 export interface PickerYearValue {
     readonly year: number;
 }
-export interface PickerRootSlotProps {
-    readonly value: PickerValue;
+export interface PickerRootSlotProps<Value extends PickerValue = PickerValue> {
+    readonly value: Value;
     readonly highlightedValue: DateValue;
     readonly open: boolean;
     readonly dates: readonly (readonly DateValue[])[];
@@ -52,6 +58,23 @@ export interface PickerPartProps {
     readonly as?: PrimitiveAs;
     readonly asChild?: boolean;
 }
+export interface PickerPortalProps {
+    readonly to?: string | HTMLElement;
+    readonly disabled?: boolean;
+    readonly defer?: boolean;
+}
+export interface PickerPositionProps {
+    readonly position?: boolean;
+    readonly side?: PickerPositionOptions['side'];
+    readonly align?: PickerPositionOptions['align'];
+    readonly sideOffset?: number;
+    readonly collisionPadding?: PickerPositionOptions['collisionPadding'];
+    readonly collisionBoundary?: PickerPositionOptions['collisionBoundary'];
+    readonly avoidCollisions?: boolean;
+    readonly hideWhenDetached?: boolean;
+    readonly strategy?: PickerPositionOptions['strategy'];
+    readonly tracking?: PickerPositionOptions['tracking'];
+}
 export interface PickerRootConfig {
     readonly scope?: string;
     readonly granularity?: 'day' | 'month' | 'year';
@@ -60,9 +83,9 @@ export interface PickerRootConfig {
     readonly yearPageSize?: number;
     readonly inline?: boolean;
 }
-export interface PickerRootRuntimeProps {
-    readonly modelValue?: PickerValue;
-    readonly defaultValue?: PickerValue;
+export interface PickerRootRuntimeProps<Value extends PickerValue = PickerValue, Policies = Readonly<Record<string, unknown>>> extends PickerPositionProps {
+    readonly modelValue?: Value;
+    readonly defaultValue?: Value;
     readonly open?: boolean;
     readonly defaultOpen?: boolean;
     readonly highlightedValue?: DateValue;
@@ -73,63 +96,35 @@ export interface PickerRootRuntimeProps {
     readonly?: boolean;
     readonly required?: boolean;
     readonly label?: string;
-    readonly policies?: Readonly<Record<string, unknown>>;
+    readonly policies?: Policies;
     readonly as?: PrimitiveAs;
     readonly asChild?: boolean;
 }
-export declare function createPickerRoot(kind: PickerKind, name: string, config?: PickerRootConfig): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<PickerValue>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<PickerValue>;
-        default: null;
-    };
-    open: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    highlightedValue: {
-        type: PropType<DateValue>;
-        default: undefined;
-    };
-    defaultHighlightedValue: {
-        type: PropType<DateValue>;
-        default: undefined;
-    };
-    referenceDate: {
-        type: PropType<DateValue>;
-        default: undefined;
-    };
-    defaultView: {
-        type: PropType<CalendarViewMode>;
-        default: CalendarViewMode;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
+export type PickerRootPublicProps<Kind extends PickerKind> = PickerRootRuntimeProps<PickerValueFor<Kind>, PickerPoliciesFor<Kind>> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
+    readonly 'onUpdate:modelValue'?: (value: PickerValueFor<Kind>) => unknown;
+    readonly 'onUpdate:open'?: (value: boolean) => unknown;
+    readonly 'onUpdate:highlightedValue'?: (value: DateValue) => unknown;
+};
+export interface PickerRootComponent<Kind extends PickerKind> {
+    new (props: PickerRootPublicProps<Kind>): {
+        $props: PickerRootPublicProps<Kind>;
+        $slots: {
+            default?: (props: PickerRootSlotProps<PickerValueFor<Kind>>) => VNodeChild;
+        };
     };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    policies: {
-        type: PropType<Readonly<Record<string, unknown>>>;
-        default: undefined;
+}
+export type PickerRootPartPublicProps = PickerPartProps & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+export interface PickerRootPartComponent<Kind extends PickerKind> {
+    new (props: PickerRootPartPublicProps): {
+        $props: PickerRootPartPublicProps;
+        $slots: {
+            default?: (props: PickerRootSlotProps<PickerValueFor<Kind>>) => VNodeChild;
+        };
     };
+}
+export declare function specializePickerRootPart<Kind extends PickerKind>(_kind: Kind, component: Component): PickerRootPartComponent<Kind>;
+export declare function createPickerRoot<Kind extends PickerKind>(kind: Kind, name: string, config?: PickerRootConfig): PickerRootComponent<Kind>;
+export declare const PickerTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<PrimitiveAs>;
         default: string;
@@ -138,63 +133,7 @@ export declare function createPickerRoot(kind: PickerKind, name: string, config?
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (_value: PickerValue) => boolean;
-    'update:open': (_value: boolean) => boolean;
-    'update:highlightedValue': (_value: DateValue) => boolean;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<PickerValue>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<PickerValue>;
-        default: null;
-    };
-    open: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    highlightedValue: {
-        type: PropType<DateValue>;
-        default: undefined;
-    };
-    defaultHighlightedValue: {
-        type: PropType<DateValue>;
-        default: undefined;
-    };
-    referenceDate: {
-        type: PropType<DateValue>;
-        default: undefined;
-    };
-    defaultView: {
-        type: PropType<CalendarViewMode>;
-        default: CalendarViewMode;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    policies: {
-        type: PropType<Readonly<Record<string, unknown>>>;
-        default: undefined;
-    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<PrimitiveAs>;
         default: string;
@@ -203,30 +142,13 @@ export declare function createPickerRoot(kind: PickerKind, name: string, config?
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{
-    "onUpdate:highlightedValue"?: (_value: DateValue) => any;
-    "onUpdate:modelValue"?: (_value: PickerValue) => any;
-    "onUpdate:open"?: (_value: boolean) => any;
-}>, {
-    modelValue: PickerValue;
-    defaultValue: PickerValue;
-    open: boolean;
-    defaultOpen: boolean;
-    highlightedValue: DateValue;
-    defaultHighlightedValue: DateValue;
-    referenceDate: DateValue;
-    defaultView: CalendarViewMode;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    label: string;
-    policies: Readonly<Record<string, unknown>>;
+}>> & Readonly<{}>, {
     as: PrimitiveAs;
     asChild: boolean;
 }, SlotsType<{
     default: (props: PickerRootSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export declare const PickerTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare const PickerAnchor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<PrimitiveAs>;
         default: string;
@@ -247,9 +169,7 @@ export declare const PickerTrigger: import("vue").DefineComponent<import("vue").
 }>> & Readonly<{}>, {
     as: PrimitiveAs;
     asChild: boolean;
-}, SlotsType<{
-    default: (props: PickerRootSlotProps) => VNodeChild;
-}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const PickerContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<PrimitiveAs>;
@@ -274,6 +194,37 @@ export declare const PickerContent: import("vue").DefineComponent<import("vue").
 }, SlotsType<{
     default: (props: PickerRootSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const PickerPortal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: PropType<string | HTMLElement>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: PropType<string | HTMLElement>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    to: string | HTMLElement;
+    disabled: boolean;
+    defer: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const PickerGrid: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<PrimitiveAs>;
@@ -546,4 +497,3 @@ export declare function createPickerViewTrigger(view: CalendarViewMode, name: st
 }, SlotsType<{
     default: (props: PickerRootSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=date-picker.d.ts.map

package/dist/internal/date-picker.js

@@ -1,17 +1,22 @@
-import { Fragment, computed, defineComponent, h, inject, mergeProps, onBeforeUnmount, onMounted, nextTick, provide, shallowRef, watch, } from 'vue';
-import { createCalendar } from '@sectile/dom/calendar';
-import { createDatePicker, createCalendarMonth, createCalendarYear, isCalendarValueAvailable } from '@sectile/dom/date-picker';
-import { createDateRangePicker } from '@sectile/dom/date-range-picker';
-import { createDateTimePicker } from '@sectile/dom/date-time-picker';
-import { createDateTimeRangePicker } from '@sectile/dom/date-time-range-picker';
-import { formatDateValue, parseDateValue } from '@sectile/dom/date-field';
-import { formatDateTimeValue } from '@sectile/dom/date-time-field';
-import { formatTimeValue } from '@sectile/dom/time-field';
+import { Fragment, Teleport, computed, defineComponent, h, inject, mergeProps, onBeforeUnmount, onMounted, nextTick, provide, shallowRef, watch, } from 'vue';
+import { createCalendar } from '@sectile/dom/temporal/calendar';
+import { createDatePicker, createCalendarMonth, createCalendarYear, isCalendarValueAvailable } from '@sectile/dom/temporal/date-picker';
+import { createDateRangePicker } from '@sectile/dom/temporal/date-range-picker';
+import { createDateTimePicker } from '@sectile/dom/temporal/date-time-picker';
+import { createDateTimeRangePicker } from '@sectile/dom/temporal/date-time-range-picker';
+import { formatDateValue, parseDateValue } from '@sectile/dom/temporal/date-field';
+import { formatDateTimeValue } from '@sectile/dom/temporal/date-time-field';
+import { formatTimeValue } from '@sectile/dom/temporal/time-field';
 import { hiddenInputSubmissionCapabilities, useCompositeFormControl, } from './form-control.js';
 import { Primitive } from '../primitive.js';
 import { useControlledStateInvariant } from './controlled-state.js';
-import { useHostReferenceDate } from '../host-provider.js';
+import { useHostPortalTarget } from '../host-provider.js';
+import { useTemporalReferenceDate } from '../temporal-provider.js';
+export function specializePickerRootPart(_kind, component) {
+    return component;
+}
 const key = Symbol('SectileDatePickerRoot');
+const noPendingPickerValue = Symbol('no-pending-picker-value');
 const partProps = { as: { type: [String, Object, Function], default: 'div' }, asChild: { type: Boolean, default: false } };
 export function createPickerRoot(kind, name, config = {}) {
     const scope = config.scope ?? kind;
@@ -20,7 +25,7 @@ export function createPickerRoot(kind, name, config = {}) {
     const defaultOpen = config.defaultOpen ?? false;
     const yearPageSize = config.yearPageSize ?? 12;
     const inline = config.inline ?? false;
-    return defineComponent({
+    const component = defineComponent({
         name, inheritAttrs: false,
         props: {
             modelValue: { type: Object, default: undefined }, defaultValue: { type: Object, default: null },
@@ -30,36 +35,50 @@ export function createPickerRoot(kind, name, config = {}) {
             defaultView: { type: String, default: defaultView },
             disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, required: { type: Boolean, default: false },
             label: { type: String, default: undefined }, policies: { type: Object, default: undefined },
+            position: { type: Boolean, default: true },
+            side: { type: String, default: 'bottom' },
+            align: { type: String, default: 'center' },
+            sideOffset: { type: Number, default: 8 },
+            collisionPadding: { type: [Number, Object], default: 8 },
+            collisionBoundary: { type: [String, Object], default: undefined },
+            avoidCollisions: { type: Boolean, default: true }, hideWhenDetached: { type: Boolean, default: true },
+            strategy: { type: String, default: 'absolute' },
+            tracking: { type: String, default: 'events' },
             as: { type: [String, Object, Function], default: 'div' }, asChild: { type: Boolean, default: false },
         },
         emits: { 'update:modelValue': (_value) => true, 'update:open': (_value) => true, 'update:highlightedValue': (_value) => true },
         slots: Object,
         setup(props, { emit, slots }) {
+            const runtimeProps = props;
             const elements = new Map();
             const connection = shallowRef();
-            const hostReferenceDate = useHostReferenceDate();
-            const referenceDate = computed(() => props.referenceDate ?? hostReferenceDate.value);
+            const hostReferenceDate = useTemporalReferenceDate();
+            const referenceDate = computed(() => runtimeProps.referenceDate ?? hostReferenceDate.value);
             const inlineTrigger = typeof document === 'undefined' || !inline || kind === 'calendar' ? undefined : document.createElement('button');
-            const localValue = shallowRef(props.modelValue !== undefined ? props.modelValue : props.defaultValue);
-            const localOpen = shallowRef(props.open ?? props.defaultOpen);
-            const localHighlight = shallowRef(props.highlightedValue ?? props.defaultHighlightedValue ?? dateOf(localValue.value) ?? referenceDate.value);
+            const localValue = shallowRef(runtimeProps.modelValue !== undefined ? runtimeProps.modelValue : runtimeProps.defaultValue);
+            const localOpen = shallowRef(runtimeProps.open ?? runtimeProps.defaultOpen);
+            const localHighlight = shallowRef(runtimeProps.highlightedValue ?? runtimeProps.defaultHighlightedValue ?? dateOf(localValue.value) ?? referenceDate.value);
             const yearPageStart = shallowRef(localHighlight.value.year - Math.floor(yearPageSize / 2));
             const dates = shallowRef(monthFor(localHighlight.value));
             const months = shallowRef(yearFor(localHighlight.value.year));
             const years = shallowRef(yearsFrom(yearPageStart.value, yearPageSize));
             const localView = shallowRef(Object.freeze({ year: localHighlight.value.year, month: localHighlight.value.month }));
-            const localViewMode = shallowRef(props.defaultView);
+            const localViewMode = shallowRef(runtimeProps.defaultView);
             const controlled = {
-                value: useControlledStateInvariant(`${kind}PickerRoot`, 'modelValue', () => props.modelValue),
-                open: useControlledStateInvariant(`${kind}PickerRoot`, 'open', () => props.open),
-                highlighted: useControlledStateInvariant(`${kind}PickerRoot`, 'highlightedValue', () => props.highlightedValue),
+                value: useControlledStateInvariant(`${kind}PickerRoot`, 'modelValue', () => runtimeProps.modelValue),
+                open: useControlledStateInvariant(`${kind}PickerRoot`, 'open', () => runtimeProps.open),
+                highlighted: useControlledStateInvariant(`${kind}PickerRoot`, 'highlightedValue', () => runtimeProps.highlightedValue),
             };
+            const pendingValue = shallowRef(noPendingPickerValue);
             const state = computed(() => {
-                const highlighted = props.highlightedValue ?? localHighlight.value;
+                const highlighted = runtimeProps.highlightedValue ?? localHighlight.value;
+                const value = controlled.value && pendingValue.value !== noPendingPickerValue
+                    ? pendingValue.value
+                    : runtimeProps.modelValue !== undefined ? runtimeProps.modelValue : localValue.value;
                 return Object.freeze({
-                    value: props.modelValue !== undefined ? props.modelValue : localValue.value,
-                    highlightedValue: highlighted, open: props.open ?? localOpen.value, dates: dates.value, months: months.value, years: years.value,
-                    view: localView.value, viewMode: localViewMode.value, disabled: props.disabled, readonly: props.readonly,
+                    value,
+                    highlightedValue: highlighted, open: runtimeProps.open ?? localOpen.value, dates: dates.value, months: months.value, years: years.value,
+                    view: localView.value, viewMode: localViewMode.value, disabled: runtimeProps.disabled, readonly: runtimeProps.readonly,
                 });
             });
             useCompositeFormControl({
@@ -68,7 +87,7 @@ export function createPickerRoot(kind, name, config = {}) {
                 submissions: () => pickerFormSubmissions(elements, kind),
             });
             const periodAvailable = (value) => {
-                const policies = props.policies;
+                const policies = runtimeProps.policies;
                 if ('month' in value)
                     return monthAvailable(value, policies);
                 return Array.from({ length: 12 }, (_entry, index) => index + 1)
@@ -113,19 +132,35 @@ export function createPickerRoot(kind, name, config = {}) {
                 if (content === undefined || grid === undefined || (kind !== 'calendar' && trigger === undefined))
                     return;
                 const base = {
-                    root: content, grid, disabled: props.disabled, readOnly: props.readonly, required: props.required,
+                    root: content, grid, disabled: runtimeProps.disabled, readOnly: runtimeProps.readonly, required: runtimeProps.required,
                     referenceDate: referenceDate.value,
-                    ...(props.label === undefined ? {} : { label: props.label }), ...(props.policies === undefined ? {} : { policies: props.policies }),
-                    ...(controlled.value ? { value: props.modelValue } : { defaultValue: localValue.value }),
-                    ...(controlled.highlighted ? { highlightedValue: props.highlightedValue } : { defaultHighlightedValue: localHighlight.value }),
-                    onValueChange: (value) => { localValue.value = value; emit('update:modelValue', value); },
+                    ...(runtimeProps.label === undefined ? {} : { label: runtimeProps.label }), ...(runtimeProps.policies === undefined ? {} : { policies: runtimeProps.policies }),
+                    ...(controlled.value ? { value: runtimeProps.modelValue } : { defaultValue: localValue.value }),
+                    ...(controlled.highlighted ? { highlightedValue: runtimeProps.highlightedValue } : { defaultHighlightedValue: localHighlight.value }),
+                    onValueChange: (value) => {
+                        localValue.value = value;
+                        if (controlled.value)
+                            pendingValue.value = value;
+                        emit('update:modelValue', value);
+                    },
                     onHighlightedValueChange: (value) => { localHighlight.value = value; emit('update:highlightedValue', value); },
                     onUpdate: refresh,
                 };
                 if (kind !== 'calendar') {
                     base['trigger'] = trigger;
+                    const anchor = elements.get('anchor');
+                    if (anchor !== undefined)
+                        base['anchor'] = anchor;
+                    Object.assign(base, {
+                        position: runtimeProps.position, side: runtimeProps.side, align: runtimeProps.align, sideOffset: runtimeProps.sideOffset,
+                        collisionPadding: runtimeProps.collisionPadding, avoidCollisions: runtimeProps.avoidCollisions,
+                        hideWhenDetached: runtimeProps.hideWhenDetached, strategy: runtimeProps.strategy,
+                        tracking: runtimeProps.tracking,
+                    });
+                    if (runtimeProps.collisionBoundary !== undefined)
+                        base['collisionBoundary'] = runtimeProps.collisionBoundary;
                     if (controlled.open)
-                        base['open'] = props.open;
+                        base['open'] = runtimeProps.open;
                     else
                         base['defaultOpen'] = localOpen.value;
                     base['onOpenChange'] = (value) => { localOpen.value = value; emit('update:open', value); };
@@ -142,11 +177,23 @@ export function createPickerRoot(kind, name, config = {}) {
                         : kind === 'date-range' ? createDateRangePicker(base)
                             : kind === 'date-time' ? createDateTimePicker(base) : createDateTimeRangePicker(base);
                 connection.value = created;
-                if (props.defaultView !== 'month')
-                    connection.value.handleEvent({ type: 'set-view-mode', value: props.defaultView });
+                if (runtimeProps.defaultView !== 'month')
+                    connection.value.handleEvent({ type: 'set-view-mode', value: runtimeProps.defaultView });
                 refreshCells();
                 refresh();
             };
+            let mounted = false;
+            let connectQueued = false;
+            const scheduleConnect = () => {
+                if (!mounted || connectQueued)
+                    return;
+                connectQueued = true;
+                void nextTick(() => {
+                    connectQueued = false;
+                    if (mounted)
+                        connect();
+                });
+            };
             const moveBy = (unit, delta) => {
                 const direction = delta < 0 ? -1 : 1;
                 for (let index = 0; index < Math.abs(delta); index += 1) {
@@ -166,10 +213,16 @@ export function createPickerRoot(kind, name, config = {}) {
             };
             provide(key, {
                 kind, scope, granularity, inline, state, periodAvailable,
-                register: (part, element) => { if (element === undefined)
-                    elements.delete(part);
-                else
-                    elements.set(part, element); },
+                position: computed(() => runtimeProps.position), strategy: computed(() => runtimeProps.strategy),
+                register: (part, element) => {
+                    if (elements.get(part) === element || (element === undefined && !elements.has(part)))
+                        return;
+                    if (element === undefined)
+                        elements.delete(part);
+                    else
+                        elements.set(part, element);
+                    scheduleConnect();
+                },
                 registerCell: (element, value) => connection.value?.setCellAttributes(element, value),
                 move: (unit, direction) => {
                     const repetitions = granularity === 'year' && unit === 'year' ? yearPageSize : 1;
@@ -223,22 +276,37 @@ export function createPickerRoot(kind, name, config = {}) {
                 selectMonth,
                 selectYear,
             });
-            onMounted(connect);
-            onBeforeUnmount(() => connection.value?.disconnect());
-            watch([() => props.disabled, () => props.readonly, () => props.required, () => props.label, () => props.policies], connect);
+            onMounted(() => {
+                mounted = true;
+                connect();
+            });
+            onBeforeUnmount(() => {
+                mounted = false;
+                connectQueued = false;
+                connection.value?.disconnect();
+                connection.value = undefined;
+            });
+            watch([
+                () => runtimeProps.disabled, () => runtimeProps.readonly, () => runtimeProps.required, () => runtimeProps.label, () => runtimeProps.policies,
+                () => runtimeProps.position, () => runtimeProps.side, () => runtimeProps.align, () => runtimeProps.sideOffset,
+                () => runtimeProps.collisionPadding, () => runtimeProps.collisionBoundary, () => runtimeProps.avoidCollisions,
+                () => runtimeProps.hideWhenDetached, () => runtimeProps.strategy, () => runtimeProps.tracking,
+            ], connect);
             watch(referenceDate, (value) => {
-                if (props.highlightedValue === undefined
-                    && props.defaultHighlightedValue === undefined
-                    && dateOf(props.modelValue ?? props.defaultValue) === null)
+                if (runtimeProps.highlightedValue === undefined
+                    && runtimeProps.defaultHighlightedValue === undefined
+                    && dateOf(runtimeProps.modelValue ?? runtimeProps.defaultValue) === null)
                     localHighlight.value = value;
                 connect();
             });
-            watch([() => props.modelValue, () => props.open, () => props.highlightedValue], () => {
+            watch([() => runtimeProps.modelValue, () => runtimeProps.open, () => runtimeProps.highlightedValue], (values, previousValues) => {
                 if (connection.value === undefined)
                     return;
+                if (values[0] !== previousValues[0])
+                    pendingValue.value = noPendingPickerValue;
                 const result = connection.value.syncControlledValues({
-                    ...(controlled.value ? { value: props.modelValue } : {}), ...(kind !== 'calendar' && controlled.open ? { open: props.open } : {}),
-                    ...(controlled.highlighted ? { highlightedValue: props.highlightedValue } : {}),
+                    ...(controlled.value ? { value: runtimeProps.modelValue } : {}), ...(kind !== 'calendar' && controlled.open ? { open: runtimeProps.open } : {}),
+                    ...(controlled.highlighted ? { highlightedValue: runtimeProps.highlightedValue } : {}),
                 });
                 if (!result.ok)
                     throw new TypeError(result.error?.message ?? 'Could not synchronize picker values.');
@@ -249,8 +317,9 @@ export function createPickerRoot(kind, name, config = {}) {
             };
         },
     });
+    return component;
 }
-export const PickerTrigger = defineComponent({
+export const PickerTrigger = /* @__PURE__ */ defineComponent({
     name: 'SectilePickerTrigger', inheritAttrs: false,
     props: { as: { type: [String, Object, Function], default: 'button' }, asChild: { type: Boolean, default: false } },
     slots: Object,
@@ -263,7 +332,17 @@ export const PickerTrigger = defineComponent({
         }), { default: () => slots['default']?.(root.state.value) });
     },
 });
-export const PickerContent = defineComponent({
+export const PickerAnchor = /* @__PURE__ */ defineComponent({
+    name: 'SectilePickerAnchor', inheritAttrs: false, props: partProps,
+    setup(props, { attrs, slots }) {
+        const root = useRoot('PickerAnchor');
+        return () => h(Primitive, mergeProps(attrs, {
+            as: props.as, asChild: props.asChild, elementRef: (node) => root.register('anchor', node instanceof HTMLElement ? node : undefined),
+            'data-scope': root.scope, 'data-part': 'anchor',
+        }), slots);
+    },
+});
+export const PickerContent = /* @__PURE__ */ defineComponent({
     name: 'SectilePickerContent', inheritAttrs: false, props: partProps,
     slots: Object,
     setup(props, { attrs, slots }) {
@@ -271,10 +350,25 @@ export const PickerContent = defineComponent({
         return () => h(Primitive, mergeProps(attrs, {
             as: props.as, asChild: props.asChild, elementRef: (node) => root.register('content', node instanceof HTMLElement ? node : undefined),
             role: root.inline ? 'group' : 'dialog', 'aria-modal': root.inline ? undefined : 'false', hidden: root.inline ? false : !root.state.value.open, 'data-scope': root.scope, 'data-part': 'content', 'data-state': root.state.value.open ? 'open' : 'closed',
+            style: !root.inline && root.position.value ? { position: root.strategy.value } : undefined,
         }), { default: () => slots['default']?.(root.state.value) });
     },
 });
-export const PickerGrid = defineComponent({
+export const PickerPortal = /* @__PURE__ */ defineComponent({
+    name: 'SectilePickerPortal', inheritAttrs: false,
+    props: {
+        to: { type: [String, Object], default: undefined },
+        disabled: { type: Boolean, default: false }, defer: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+        useRoot('PickerPortal');
+        const portalTarget = useHostPortalTarget();
+        return () => h(Teleport, {
+            to: props.to ?? portalTarget.value ?? 'body', disabled: props.disabled, defer: props.defer,
+        }, slots['default']?.());
+    },
+});
+export const PickerGrid = /* @__PURE__ */ defineComponent({
     name: 'SectilePickerGrid', inheritAttrs: false, props: partProps,
     slots: Object,
     setup(props, { attrs, slots }) {
@@ -285,7 +379,7 @@ export const PickerGrid = defineComponent({
         }), { default: () => slots['default']?.(root.state.value) });
     },
 });
-export const PickerCell = defineComponent({
+export const PickerCell = /* @__PURE__ */ defineComponent({
     name: 'SectilePickerCell', inheritAttrs: false,
     props: { value: { type: Object, required: true }, as: { type: [String, Object, Function], default: 'button' }, asChild: { type: Boolean, default: false } },
     slots: Object,
@@ -365,8 +459,8 @@ export function createPickerYearCell(part = 'year-cell', name = 'SectilePickerYe
         },
     });
 }
-export const PickerMonthCell = createPickerMonthCell();
-export const PickerYearCell = createPickerYearCell();
+export const PickerMonthCell = /* @__PURE__ */ createPickerMonthCell();
+export const PickerYearCell = /* @__PURE__ */ createPickerYearCell();
 export function createPickerInput(part, name, type = 'text') {
     return defineComponent({
         name, inheritAttrs: false,