@sectile/vue 0.7.0 → 0.8.0

package/dist/meter.d.ts

@@ -0,0 +1,191 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type PrimitiveAs } from './primitive.js';
+export type MeterValueFormatter = (value: string) => string;
+export interface MeterRootProps {
+    readonly value: number | string;
+    readonly min?: number | string;
+    readonly max?: number | string;
+    readonly low?: number | string;
+    readonly high?: number | string;
+    readonly optimum?: number | string;
+    readonly label?: string;
+    readonly formatValue?: MeterValueFormatter;
+    readonly as?: PrimitiveAs;
+    readonly asChild?: boolean;
+}
+export interface MeterRootSlotProps {
+    readonly value: string;
+    readonly min: string;
+    readonly max: string;
+    readonly low: string;
+    readonly high: string;
+    readonly optimum: string;
+    readonly valueText: string;
+    readonly percentage: number;
+    readonly zone: 'optimum' | 'suboptimal' | 'even-less-good';
+}
+export interface MeterPartProps {
+    readonly as?: PrimitiveAs;
+    readonly asChild?: boolean;
+}
+export declare const MeterRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        required: true;
+    };
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    low: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    high: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    optimum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    formatValue: {
+        type: PropType<MeterValueFormatter>;
+        default: undefined;
+    };
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        required: true;
+    };
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    low: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    high: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    optimum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    formatValue: {
+        type: PropType<MeterValueFormatter>;
+        default: undefined;
+    };
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    min: string | number;
+    max: string | number;
+    low: string | number;
+    high: string | number;
+    optimum: string | number;
+    label: string;
+    formatValue: MeterValueFormatter;
+    as: PrimitiveAs;
+    asChild: boolean;
+}, SlotsType<{
+    default: (props: MeterRootSlotProps) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const MeterTrack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: PrimitiveAs;
+    asChild: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const MeterIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: PrimitiveAs;
+    asChild: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const MeterValueText: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: PropType<PrimitiveAs>;
+        default: string;
+    };
+    asChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: PrimitiveAs;
+    asChild: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/meter.js

@@ -0,0 +1,133 @@
+import { computed, defineComponent, h, inject, mergeProps, provide, } from 'vue';
+import { createMeterState } from '@sectile/core/meter';
+import { getMeterIndicatorAttributes, getMeterRootAttributes, } from '@sectile/dom/meter';
+import { Primitive } from './primitive.js';
+import { normalizeDecimalInput } from './internal/decimal-input.js';
+const meterKey = Symbol('SectileMeterRoot');
+const partProps = {
+    as: { type: [String, Object, Function], default: 'div' },
+    asChild: { type: Boolean, default: false },
+};
+export const MeterRoot = defineComponent({
+    name: 'SectileMeterRoot',
+    inheritAttrs: false,
+    props: {
+        value: { type: [Number, String], required: true },
+        min: { type: [Number, String], default: 0 },
+        max: { type: [Number, String], default: 100 },
+        low: { type: [Number, String], default: undefined },
+        high: { type: [Number, String], default: undefined },
+        optimum: { type: [Number, String], default: undefined },
+        label: { type: String, default: undefined },
+        formatValue: { type: Function, default: undefined },
+        as: { type: [String, Object, Function], default: 'div' },
+        asChild: { type: Boolean, default: false },
+    },
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        const state = computed(() => {
+            const meter = createMeterState({
+                value: normalizeDecimalInput(props.value),
+                min: normalizeDecimalInput(props.min),
+                max: normalizeDecimalInput(props.max),
+                ...(props.low === undefined ? {} : { low: normalizeDecimalInput(props.low) }),
+                ...(props.high === undefined ? {} : { high: normalizeDecimalInput(props.high) }),
+                ...(props.optimum === undefined ? {} : { optimum: normalizeDecimalInput(props.optimum) }),
+            });
+            const projected = getMeterRootAttributes(meter);
+            const valueText = props.formatValue?.(meter.value) ?? meter.value;
+            return Object.freeze({
+                value: meter.value,
+                min: meter.min,
+                max: meter.max,
+                low: meter.low,
+                high: meter.high,
+                optimum: meter.optimum,
+                valueText,
+                percentage: Number(projected['data-percentage']),
+                zone: meter.zone,
+            });
+        });
+        provide(meterKey, { state });
+        return () => {
+            const current = state.value;
+            const projected = getMeterRootAttributes(createMeterState({
+                value: current.value,
+                min: current.min,
+                max: current.max,
+                low: current.low,
+                high: current.high,
+                optimum: current.optimum,
+            }), {
+                ...(props.label === undefined ? {} : { label: props.label }),
+                ...(typeof attrs['aria-labelledby'] === 'string' ? { labelledBy: attrs['aria-labelledby'] } : {}),
+                ...(typeof attrs['aria-describedby'] === 'string' ? { describedBy: attrs['aria-describedby'] } : {}),
+                ...(props.formatValue === undefined ? {} : { formatValue: props.formatValue }),
+            });
+            return h(Primitive, mergeProps(attrs, projected, {
+                as: props.as,
+                asChild: props.asChild,
+            }), { default: () => slots['default']?.(current) });
+        };
+    },
+});
+export const MeterTrack = meterPart('SectileMeterTrack', 'track');
+export const MeterIndicator = defineComponent({
+    name: 'SectileMeterIndicator',
+    inheritAttrs: false,
+    props: partProps,
+    setup(props, { attrs, slots }) {
+        const root = useMeter('MeterIndicator');
+        return () => {
+            const current = root.state.value;
+            const meter = createMeterState({
+                value: current.value, min: current.min, max: current.max,
+                low: current.low, high: current.high, optimum: current.optimum,
+            });
+            return h(Primitive, mergeProps(attrs, getMeterIndicatorAttributes(meter), {
+                as: props.as,
+                asChild: props.asChild,
+            }), slots);
+        };
+    },
+});
+export const MeterValueText = defineComponent({
+    name: 'SectileMeterValueText',
+    inheritAttrs: false,
+    props: {
+        as: { type: [String, Object, Function], default: 'span' },
+        asChild: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        const root = useMeter('MeterValueText');
+        return () => h(Primitive, mergeProps(attrs, {
+            as: props.as,
+            asChild: props.asChild,
+            'data-scope': 'meter',
+            'data-part': 'value-text',
+        }), { default: () => slots['default']?.(root.state.value) ?? root.state.value.valueText });
+    },
+});
+function meterPart(name, part) {
+    return defineComponent({
+        name,
+        inheritAttrs: false,
+        props: partProps,
+        setup(props, { attrs, slots }) {
+            useMeter(name);
+            return () => h(Primitive, mergeProps(attrs, {
+                as: props.as,
+                asChild: props.asChild,
+                'data-scope': 'meter',
+                'data-part': part,
+            }), slots);
+        },
+    });
+}
+function useMeter(part) {
+    const root = inject(meterKey);
+    if (root === undefined)
+        throw new TypeError(`${part} must be used inside MeterRoot.`);
+    return root;
+}
+//# sourceMappingURL=meter.js.map

package/dist/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sourceRoot":"","sources":["../src/meter.ts"],"names":[],"mappings":"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"}

package/dist/month-picker.d.ts

@@ -1,7 +1,7 @@
-import type { DatePickerOptions } from '@sectile/dom/date-picker';
-import type { DateValue } from '@sectile/dom/date-field';
-import { type PickerMonthCellSlotProps, type PickerPartProps, type PickerRootSlotProps } from './internal/date-picker.js';
-export interface MonthPickerRootProps extends PickerPartProps {
+import type { DatePickerOptions } from '@sectile/dom/temporal/date-picker';
+import type { DateValue } from '@sectile/dom/temporal/date-field';
+import { type PickerMonthCellSlotProps, type PickerPartProps, type PickerPortalProps, type PickerPositionProps, type PickerRootSlotProps } from './internal/date-picker.js';
+export interface MonthPickerRootProps extends PickerPartProps, PickerPositionProps {
     readonly modelValue?: DateValue | null;
     readonly defaultValue?: DateValue | null;
     readonly highlightedValue?: DateValue;
@@ -22,6 +22,38 @@ export type MonthPickerValueChangeHandler = NonNullable<InstanceType<typeof Mont
 export type MonthPickerOpenChangeHandler = NonNullable<InstanceType<typeof MonthPickerRoot>['$props']['onUpdate:open']>;
 export type MonthPickerHighlightedValueChangeHandler = NonNullable<InstanceType<typeof MonthPickerRoot>['$props']['onUpdate:highlightedValue']>;
 export declare const MonthPickerTrigger: import("./internal/date-picker.js").PickerRootPartComponent<"date">;
+export declare const MonthPickerAnchor: import("./internal/date-picker.js").PickerRootPartComponent<"date">;
+export declare const MonthPickerPortal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").PropType<string | HTMLElement>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").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 MonthPickerContent: import("./internal/date-picker.js").PickerRootPartComponent<"date">;
 export declare const MonthPickerGrid: import("./internal/date-picker.js").PickerRootPartComponent<"date">;
 export declare const MonthPickerCell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -98,5 +130,4 @@ export declare const MonthPickerInput: import("vue").DefineComponent<import("vue
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const MonthPickerPreviousYear: import("./internal/date-picker.js").PickerRootPartComponent<"date">;
 export declare const MonthPickerNextYear: import("./internal/date-picker.js").PickerRootPartComponent<"date">;
-export type { DateValue as MonthPickerValue, PickerMonthCellSlotProps as MonthPickerCellSlotProps, PickerPartProps as MonthPickerPartProps, };
-//# sourceMappingURL=month-picker.d.ts.map
+export type { DateValue as MonthPickerValue, PickerMonthCellSlotProps as MonthPickerCellSlotProps, PickerPartProps as MonthPickerPartProps, PickerPortalProps as MonthPickerPortalProps, };

package/dist/month-picker.js

@@ -1,6 +1,8 @@
-import { PickerContent, PickerGrid, PickerTrigger, createPickerInput, createPickerMonthCell, createPickerMove, specializePickerRootPart, createPickerRoot, } from './internal/date-picker.js';
+import { PickerAnchor, PickerContent, PickerGrid, PickerPortal, PickerTrigger, createPickerInput, createPickerMonthCell, createPickerMove, specializePickerRootPart, createPickerRoot, } from './internal/date-picker.js';
 export const MonthPickerRoot = createPickerRoot('date', 'SectileMonthPickerRoot', { scope: 'month-picker', granularity: 'month', defaultView: 'year' });
 export const MonthPickerTrigger = specializePickerRootPart('date', PickerTrigger);
+export const MonthPickerAnchor = specializePickerRootPart('date', PickerAnchor);
+export const MonthPickerPortal = PickerPortal;
 export const MonthPickerContent = specializePickerRootPart('date', PickerContent);
 export const MonthPickerGrid = specializePickerRootPart('date', PickerGrid);
 export const MonthPickerCell = createPickerMonthCell('cell', 'SectileMonthPickerCell');

package/dist/month-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"month-picker.js","sourceRoot":"","sources":["../src/month-picker.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,wBAAwB,EAC9H,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAiBnC,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;AAKxJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAClF,MAAM,CAAC,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAClF,MAAM,CAAC,MAAM,eAAe,GAAG,wBAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,eAAe,GAAG,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;AACtF,MAAM,CAAC,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,gCAAgC,CAAC,CAAC,CAAC;AACxI,MAAM,CAAC,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,4BAA4B,CAAC,CAAC,CAAC"}
+{"version":3,"file":"month-picker.js","sourceRoot":"","sources":["../src/month-picker.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,wBAAwB,EAC1J,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAiBnC,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;AAKxJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAClF,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC9C,MAAM,CAAC,MAAM,kBAAkB,GAAG,wBAAwB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAClF,MAAM,CAAC,MAAM,eAAe,GAAG,wBAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,eAAe,GAAG,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;AACtF,MAAM,CAAC,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,gCAAgC,CAAC,CAAC,CAAC;AACxI,MAAM,CAAC,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,4BAA4B,CAAC,CAAC,CAAC"}

package/dist/month-range-picker.d.ts

@@ -1,7 +1,7 @@
-import type { DateRangePickerOptions } from '@sectile/dom/date-range-picker';
-import type { DateRange, DateValue } from '@sectile/dom/date-field';
-import { type PickerMonthCellSlotProps, type PickerPartProps, type PickerRootSlotProps } from './internal/date-picker.js';
-export interface MonthRangePickerRootProps extends PickerPartProps {
+import type { DateRangePickerOptions } from '@sectile/dom/temporal/date-range-picker';
+import type { DateRange, DateValue } from '@sectile/dom/temporal/date-field';
+import { type PickerMonthCellSlotProps, type PickerPartProps, type PickerPortalProps, type PickerPositionProps, type PickerRootSlotProps } from './internal/date-picker.js';
+export interface MonthRangePickerRootProps extends PickerPartProps, PickerPositionProps {
     readonly modelValue?: DateRange | null;
     readonly defaultValue?: DateRange | null;
     readonly highlightedValue?: DateValue;
@@ -22,6 +22,38 @@ export type MonthRangePickerValueChangeHandler = NonNullable<InstanceType<typeof
 export type MonthRangePickerOpenChangeHandler = NonNullable<InstanceType<typeof MonthRangePickerRoot>['$props']['onUpdate:open']>;
 export type MonthRangePickerHighlightedValueChangeHandler = NonNullable<InstanceType<typeof MonthRangePickerRoot>['$props']['onUpdate:highlightedValue']>;
 export declare const MonthRangePickerTrigger: import("./internal/date-picker.js").PickerRootPartComponent<"date-range">;
+export declare const MonthRangePickerAnchor: import("./internal/date-picker.js").PickerRootPartComponent<"date-range">;
+export declare const MonthRangePickerPortal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").PropType<string | HTMLElement>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").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 MonthRangePickerContent: import("./internal/date-picker.js").PickerRootPartComponent<"date-range">;
 export declare const MonthRangePickerGrid: import("./internal/date-picker.js").PickerRootPartComponent<"date-range">;
 export declare const MonthRangePickerCell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -138,5 +170,4 @@ export declare const MonthRangePickerEndInput: import("vue").DefineComponent<imp
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const MonthRangePickerPreviousYear: import("./internal/date-picker.js").PickerRootPartComponent<"date-range">;
 export declare const MonthRangePickerNextYear: import("./internal/date-picker.js").PickerRootPartComponent<"date-range">;
-export type { DateRange as MonthRangePickerValue, DateValue as MonthPickerValue, PickerMonthCellSlotProps as MonthRangePickerCellSlotProps, PickerPartProps as MonthRangePickerPartProps, };
-//# sourceMappingURL=month-range-picker.d.ts.map
+export type { DateRange as MonthRangePickerValue, DateValue as MonthPickerValue, PickerMonthCellSlotProps as MonthRangePickerCellSlotProps, PickerPartProps as MonthRangePickerPartProps, PickerPortalProps as MonthRangePickerPortalProps, };

package/dist/month-range-picker.js

@@ -1,6 +1,8 @@
-import { PickerContent, PickerGrid, PickerTrigger, createPickerInput, createPickerMonthCell, createPickerMove, specializePickerRootPart, createPickerRoot, } from './internal/date-picker.js';
+import { PickerAnchor, PickerContent, PickerGrid, PickerPortal, PickerTrigger, createPickerInput, createPickerMonthCell, createPickerMove, specializePickerRootPart, createPickerRoot, } from './internal/date-picker.js';
 export const MonthRangePickerRoot = createPickerRoot('date-range', 'SectileMonthRangePickerRoot', { scope: 'month-range-picker', granularity: 'month', defaultView: 'year' });
 export const MonthRangePickerTrigger = specializePickerRootPart('date-range', PickerTrigger);
+export const MonthRangePickerAnchor = specializePickerRootPart('date-range', PickerAnchor);
+export const MonthRangePickerPortal = PickerPortal;
 export const MonthRangePickerContent = specializePickerRootPart('date-range', PickerContent);
 export const MonthRangePickerGrid = specializePickerRootPart('date-range', PickerGrid);
 export const MonthRangePickerCell = createPickerMonthCell('cell', 'SectileMonthRangePickerCell');

package/dist/month-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"month-range-picker.js","sourceRoot":"","sources":["../src/month-range-picker.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,wBAAwB,EAC9H,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAiBnC,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,EAAE,6BAA6B,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;AAK9K,MAAM,CAAC,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AACjG,MAAM,CAAC,MAAM,0BAA0B,GAAG,iBAAiB,CAAC,aAAa,EAAE,mCAAmC,CAAC,CAAC;AAChH,MAAM,CAAC,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC;AAC1G,MAAM,CAAC,MAAM,4BAA4B,GAAG,wBAAwB,CAAC,YAAY,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,qCAAqC,CAAC,CAAC,CAAC;AACxJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,YAAY,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,iCAAiC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"month-range-picker.js","sourceRoot":"","sources":["../src/month-range-picker.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,wBAAwB,EAC1J,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAiBnC,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,YAAY,EAAE,6BAA6B,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;AAK9K,MAAM,CAAC,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAC3F,MAAM,CAAC,MAAM,sBAAsB,GAAG,YAAY,CAAC;AACnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AACjG,MAAM,CAAC,MAAM,0BAA0B,GAAG,iBAAiB,CAAC,aAAa,EAAE,mCAAmC,CAAC,CAAC;AAChH,MAAM,CAAC,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC;AAC1G,MAAM,CAAC,MAAM,4BAA4B,GAAG,wBAAwB,CAAC,YAAY,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,qCAAqC,CAAC,CAAC,CAAC;AACxJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,YAAY,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,iCAAiC,CAAC,CAAC,CAAC"}

package/dist/multi-thumb-slider.d.ts

@@ -296,4 +296,3 @@ export declare const MultiThumbSliderThumb: import("vue").DefineComponent<import
 }, SlotsType<{
     default: (props: MultiThumbSliderThumbSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=multi-thumb-slider.d.ts.map

package/dist/navigation-menu.d.ts

@@ -111,4 +111,3 @@ export declare const NavigationMenuIndicator: import("vue").DefineComponent<impo
         open: boolean;
     }) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/number-field.d.ts

@@ -10,4 +10,3 @@ export interface NumberFieldProps {
     readonly native?: boolean;
 }
 export declare const NumberField: import("vue").DefineComponent<import("./internal/native-field.js").NativeFieldPublicProps<string, import("@sectile/core").NumberFieldPolicies>>;
-//# sourceMappingURL=number-field.d.ts.map

package/dist/pagination.d.ts

@@ -1,5 +1,5 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type PaginationItem as PaginationViewItem, type PaginationItemRange } from '@sectile/dom/pagination';
+import { type PaginationControl, type PaginationItem as PaginationViewItem, type PaginationItemRange } from '@sectile/dom/pagination';
 import { type PrimitiveAs } from './primitive.js';
 export interface PaginationRootProps {
     readonly total: number;
@@ -13,9 +13,13 @@ export interface PaginationRootProps {
     readonly disabled?: boolean;
     readonly?: boolean;
     readonly label?: string;
+    readonly getPageLabel?: (page: number) => string;
+    readonly getControlLabel?: (control: PaginationControl) => string;
     readonly as?: PrimitiveAs;
     readonly asChild?: boolean;
 }
+export type PaginationPageLabelResolver = NonNullable<PaginationRootProps['getPageLabel']>;
+export type PaginationControlLabelResolver = NonNullable<PaginationRootProps['getControlLabel']>;
 export interface PaginationRootSlotProps {
     readonly page: number;
     readonly itemsPerPage: number;
@@ -78,6 +82,14 @@ export declare const PaginationRoot: import("vue").DefineComponent<import("vue")
         type: StringConstructor;
         default: string;
     };
+    getPageLabel: {
+        type: PropType<PaginationPageLabelResolver>;
+        default: undefined;
+    };
+    getControlLabel: {
+        type: PropType<PaginationControlLabelResolver>;
+        default: undefined;
+    };
     as: {
         type: PropType<PrimitiveAs>;
         default: string;
@@ -134,6 +146,14 @@ export declare const PaginationRoot: import("vue").DefineComponent<import("vue")
         type: StringConstructor;
         default: string;
     };
+    getPageLabel: {
+        type: PropType<PaginationPageLabelResolver>;
+        default: undefined;
+    };
+    getControlLabel: {
+        type: PropType<PaginationControlLabelResolver>;
+        default: undefined;
+    };
     as: {
         type: PropType<PrimitiveAs>;
         default: string;
@@ -156,6 +176,8 @@ export declare const PaginationRoot: import("vue").DefineComponent<import("vue")
     disabled: boolean;
     readonly: boolean;
     label: string;
+    getPageLabel: (page: number) => string;
+    getControlLabel: (control: PaginationControl) => string;
     as: PrimitiveAs;
     asChild: boolean;
 }, SlotsType<{
@@ -291,4 +313,3 @@ export declare const PaginationLast: import("vue").DefineComponent<import("vue")
 }, SlotsType<{
     default: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=pagination.d.ts.map

package/dist/pagination.js

@@ -12,6 +12,8 @@ export const PaginationRoot = defineComponent({
         siblingCount: { type: Number, default: 1 }, showEdges: { type: Boolean, default: true },
         showControls: { type: Boolean, default: true }, disabled: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false }, label: { type: String, default: 'Pagination' },
+        getPageLabel: { type: Function, default: undefined },
+        getControlLabel: { type: Function, default: undefined },
         as: { type: [String, Object, Function], default: 'nav' }, asChild: { type: Boolean, default: false },
     },
     emits: {
@@ -65,6 +67,8 @@ export const PaginationRoot = defineComponent({
                     : { defaultPage: page, defaultItemsPerPage: itemsPerPage }),
                 siblingCount: props.siblingCount, showEdges: props.showEdges, showControls: props.showControls,
                 disabled: props.disabled, readOnly: props.readonly, label: props.label,
+                ...(props.getPageLabel === undefined ? {} : { getPageLabel: props.getPageLabel }),
+                ...(props.getControlLabel === undefined ? {} : { getControlLabel: props.getControlLabel }),
                 onPageChange: (page) => { localPage.value = page; emit('update:modelValue', page); },
                 onItemsPerPageChange: (value) => { localItemsPerPage.value = value; emit('update:itemsPerPage', value); },
                 onUpdate: () => refreshItems(),
@@ -90,7 +94,8 @@ export const PaginationRoot = defineComponent({
         onMounted(connect);
         onBeforeUnmount(() => connection.value?.disconnect());
         watch([() => props.total, () => props.siblingCount, () => props.showEdges, () => props.showControls,
-            () => props.disabled, () => props.readonly], connect);
+            () => props.disabled, () => props.readonly, () => props.label,
+            () => props.getPageLabel, () => props.getControlLabel], connect);
         watch([() => props.modelValue, () => props.itemsPerPage], () => {
             if (!controlled || connection.value === undefined)
                 return;