@privaty/ui-forms 0.1.5 → 0.2.0

package/README.md

@@ -43,6 +43,33 @@ component, all string-valued), `SelectInput`, `CheckboxInput`. Plus
 `Submit`, `Reset`, `FormError`. Icon-style Submit/Reset: pass children; the
 label stays as the accessible name.
 
+## Picker inputs
+
+`DatePickerInput`, `MonthPickerInput`, and `WeekPickerInput` pair the
+native input with the core library's cross-browser calendar pickers — the
+custom month/week UIs Firefox never got, and one consistent picker
+everywhere else.
+
+- The **native input stays visible as the FormData carrier**: typing works,
+  native mobile pickers stay, and Kit reads live form data as ever. Firefox
+  renders month/week carriers as plain text inputs — exactly the gap the
+  calendar button fills.
+- **Firefox date exception**: Firefox draws an unhideable calendar icon on
+  `type="date"` (Bugzilla 1830890), so `DatePickerInput` yields there — the
+  native icon opens Firefox's own picker and our trigger hides, keeping one
+  icon in every browser. Month/week use our picker everywhere.
+- The overlaid calendar button opens the picker in an anchored `Popover`
+  (top layer, light dismiss, zero-lag scroll tracking). A pick **writes the
+  input the way typing does** (DOM value + a bubbling `input` event), so
+  validation cadence, touch marking, and dirty tracking are identical to
+  manual entry — one write path, no programmatic special case.
+- `min`/`max` flow to both the native input and the picker;
+  `DatePickerInput` adds `isDateDisabled`, `showWeekNumbers`,
+  `firstDayOfWeek`, and `locale` (all picker-side — constraints still
+  belong in the schema, typing can produce anything).
+- The trigger's accessible name comes from `labels.calendar.open`; while
+  the form submits, the input turns readonly and the trigger disables.
+
 ## The validation model
 
 - **With `schema`** (a Standard Schema, e.g. valibot): validation runs

package/dist/index.d.ts

@@ -9,10 +9,13 @@ export { default as Submit } from "./components/submit.svelte";
 export { default as Form } from "./form.svelte";
 export { default as CheckboxInput } from "./inputs/checkbox-input.svelte";
 export { default as DateInput } from "./inputs/date-input.svelte";
+export { default as DatePickerInput } from "./inputs/date-picker-input.svelte";
+export { default as MonthPickerInput } from "./inputs/month-picker-input.svelte";
 export { default as NumberInput } from "./inputs/number-input.svelte";
 export { default as SelectInput } from "./inputs/select-input.svelte";
 export { default as TextareaInput } from "./inputs/textarea-input.svelte";
 export { default as TextInput } from "./inputs/text-input.svelte";
+export { default as WeekPickerInput } from "./inputs/week-picker-input.svelte";
 export { wireField } from "./inputs/wire-field";
 export type { WiredField, WireFieldOptions } from "./inputs/wire-field";
 export type { CheckboxField, CheckboxFieldAttributes, DateField, DateFieldAttributes, DateFieldType, FieldRegistration, NumberField, NumberFieldAttributes, SelectField, SelectFieldAttributes, TextField, TextFieldAttributes, TextFieldType, } from "./types/field";

package/dist/index.js

@@ -9,9 +9,12 @@ export { default as Submit } from "./components/submit.svelte";
 export { default as Form } from "./form.svelte";
 export { default as CheckboxInput } from "./inputs/checkbox-input.svelte";
 export { default as DateInput } from "./inputs/date-input.svelte";
+export { default as DatePickerInput } from "./inputs/date-picker-input.svelte";
+export { default as MonthPickerInput } from "./inputs/month-picker-input.svelte";
 export { default as NumberInput } from "./inputs/number-input.svelte";
 export { default as SelectInput } from "./inputs/select-input.svelte";
 export { default as TextareaInput } from "./inputs/textarea-input.svelte";
 export { default as TextInput } from "./inputs/text-input.svelte";
+export { default as WeekPickerInput } from "./inputs/week-picker-input.svelte";
 // The extension point for custom inputs.
 export { wireField } from "./inputs/wire-field";

package/dist/inputs/date-picker-input.svelte

@@ -0,0 +1,134 @@
+<!-- @component
+Date field with a cross-browser calendar popover, wired to a SvelteKit
+remote form field — must render inside a <Form>. The native date input
+stays visible as the FormData carrier (typeable, native mobile pickers
+intact); the overlaid calendar button opens the library's DatePicker in
+an anchored Popover, and a pick writes the input exactly the way typing
+does — validation, touch, and dirty tracking behave identically. Values
+are the native input's "YYYY-MM-DD" strings.
+
+Firefox exception: it draws an unhideable calendar icon on date inputs
+(Bugzilla 1830890), so there the native affordance wins — our trigger
+hides and the icon opens Firefox's own date picker (min/max respected;
+week numbers and isDateDisabled are picker-side visuals only there —
+the schema validates regardless, as always).
+-->
+<script lang="ts">
+  import DatePicker from "@privaty/ui/calendar/date-picker.svelte";
+  import type { LabelStyle } from "@privaty/ui/components/types.js";
+  import type { DateField } from "../types/field";
+  import PickerFrame from "./picker-frame.svelte";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+
+    /** Label placement: "top" (default), "left", or "hidden". No floating:
+     * date-family inputs render their format scaffold even when empty, so
+     * :placeholder-shown never behaves. */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker. Validation itself comes from the field's schema. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly (and the calendar trigger disables) while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly and disables the calendar trigger. */
+    readonly?: boolean;
+
+    /** Initial "YYYY-MM-DD" value. */
+    initialValue?: string;
+
+    /** Inclusive ISO bounds, applied to BOTH the native input and the
+     * picker (out-of-range days render disabled). */
+    min?: string;
+    max?: string;
+    /** Marks additional days disabled in the picker (booked dates,
+     * weekends, …). Typing can still produce them — validate in the
+     * schema, as with every constraint. */
+    isDateDisabled?: (iso: string) => boolean;
+
+    /** BCP 47 tag for the picker's names and default week start —
+     * overrides `UiConfig.locale`. */
+    locale?: string;
+    /** ISO weekday the picker grid starts on (Monday = 1 … Sunday = 7). */
+    firstDayOfWeek?: number;
+    /** Adds the ISO week-number column to the picker. */
+    showWeekNumbers?: boolean;
+
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+  }
+
+  const {
+    field,
+    label,
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+    readonly = false,
+
+    initialValue = "",
+
+    min,
+    max,
+    isDateDisabled,
+
+    locale,
+    firstDayOfWeek,
+    showWeekNumbers = false,
+
+    class: classes,
+    labelClass,
+    inputClass,
+    markerClass,
+    errorClass,
+  }: Props = $props();
+</script>
+
+<PickerFrame
+  {field}
+  {label}
+  type="date"
+  {labelStyle}
+  {required}
+  {disabled}
+  {readonly}
+  {initialValue}
+  {min}
+  {max}
+  class={classes}
+  {labelClass}
+  {inputClass}
+  {markerClass}
+  {errorClass}
+>
+  {#snippet picker({ value, select })}
+    <DatePicker
+      {value}
+      onselect={select}
+      {min}
+      {max}
+      {isDateDisabled}
+      {locale}
+      {firstDayOfWeek}
+      {showWeekNumbers}
+    />
+  {/snippet}
+</PickerFrame>

package/dist/inputs/date-picker-input.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { LabelStyle } from "@privaty/ui/components/types.js";
+import type { DateField } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** Label placement: "top" (default), "left", or "hidden". No floating:
+     * date-family inputs render their format scaffold even when empty, so
+     * :placeholder-shown never behaves. */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker. Validation itself comes from the field's schema. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly (and the calendar trigger disables) while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly and disables the calendar trigger. */
+    readonly?: boolean;
+    /** Initial "YYYY-MM-DD" value. */
+    initialValue?: string;
+    /** Inclusive ISO bounds, applied to BOTH the native input and the
+     * picker (out-of-range days render disabled). */
+    min?: string;
+    max?: string;
+    /** Marks additional days disabled in the picker (booked dates,
+     * weekends, …). Typing can still produce them — validate in the
+     * schema, as with every constraint. */
+    isDateDisabled?: (iso: string) => boolean;
+    /** BCP 47 tag for the picker's names and default week start —
+     * overrides `UiConfig.locale`. */
+    locale?: string;
+    /** ISO weekday the picker grid starts on (Monday = 1 … Sunday = 7). */
+    firstDayOfWeek?: number;
+    /** Adds the ISO week-number column to the picker. */
+    showWeekNumbers?: boolean;
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+}
+/**
+ * Date field with a cross-browser calendar popover, wired to a SvelteKit
+ * remote form field — must render inside a <Form>. The native date input
+ * stays visible as the FormData carrier (typeable, native mobile pickers
+ * intact); the overlaid calendar button opens the library's DatePicker in
+ * an anchored Popover, and a pick writes the input exactly the way typing
+ * does — validation, touch, and dirty tracking behave identically. Values
+ * are the native input's "YYYY-MM-DD" strings.
+ *
+ * Firefox exception: it draws an unhideable calendar icon on date inputs
+ * (Bugzilla 1830890), so there the native affordance wins — our trigger
+ * hides and the icon opens Firefox's own date picker (min/max respected;
+ * week numbers and isDateDisabled are picker-side visuals only there —
+ * the schema validates regardless, as always).
+ */
+declare const DatePickerInput: import("svelte").Component<Props, {}, "">;
+type DatePickerInput = ReturnType<typeof DatePickerInput>;
+export default DatePickerInput;

package/dist/inputs/month-picker-input.svelte

@@ -0,0 +1,107 @@
+<!-- @component
+Month field with a cross-browser picker popover, wired to a SvelteKit
+remote form field — must render inside a <Form>. The native month input
+stays visible as the FormData carrier (Firefox renders it as a plain
+text input — exactly the gap the picker fills); the overlaid calendar
+button opens the library's MonthPicker in an anchored Popover, and a
+pick writes the input exactly the way typing does. Values are the
+native input's "YYYY-MM" strings.
+-->
+<script lang="ts">
+  import MonthPicker from "@privaty/ui/calendar/month-picker.svelte";
+  import type { LabelStyle } from "@privaty/ui/components/types.js";
+  import type { DateField } from "../types/field";
+  import PickerFrame from "./picker-frame.svelte";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+
+    /** Label placement: "top" (default), "left", or "hidden". No floating
+     * (see DateInput). */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker. Validation itself comes from the field's schema. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly (and the calendar trigger disables) while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly and disables the calendar trigger. */
+    readonly?: boolean;
+
+    /** Initial "YYYY-MM" value. */
+    initialValue?: string;
+
+    /** Inclusive "YYYY-MM" bounds, applied to BOTH the native input and
+     * the picker (out-of-range months render disabled). */
+    min?: string;
+    max?: string;
+
+    /** BCP 47 tag for the picker's month names — overrides
+     * `UiConfig.locale`. */
+    locale?: string;
+
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+  }
+
+  const {
+    field,
+    label,
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+    readonly = false,
+
+    initialValue = "",
+
+    min,
+    max,
+
+    locale,
+
+    class: classes,
+    labelClass,
+    inputClass,
+    markerClass,
+    errorClass,
+  }: Props = $props();
+</script>
+
+<PickerFrame
+  {field}
+  {label}
+  type="month"
+  {labelStyle}
+  {required}
+  {disabled}
+  {readonly}
+  {initialValue}
+  {min}
+  {max}
+  class={classes}
+  {labelClass}
+  {inputClass}
+  {markerClass}
+  {errorClass}
+>
+  {#snippet picker({ value, select })}
+    <MonthPicker {value} onselect={select} {min} {max} {locale} />
+  {/snippet}
+</PickerFrame>

package/dist/inputs/month-picker-input.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { LabelStyle } from "@privaty/ui/components/types.js";
+import type { DateField } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** Label placement: "top" (default), "left", or "hidden". No floating
+     * (see DateInput). */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker. Validation itself comes from the field's schema. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly (and the calendar trigger disables) while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly and disables the calendar trigger. */
+    readonly?: boolean;
+    /** Initial "YYYY-MM" value. */
+    initialValue?: string;
+    /** Inclusive "YYYY-MM" bounds, applied to BOTH the native input and
+     * the picker (out-of-range months render disabled). */
+    min?: string;
+    max?: string;
+    /** BCP 47 tag for the picker's month names — overrides
+     * `UiConfig.locale`. */
+    locale?: string;
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+}
+/**
+ * Month field with a cross-browser picker popover, wired to a SvelteKit
+ * remote form field — must render inside a <Form>. The native month input
+ * stays visible as the FormData carrier (Firefox renders it as a plain
+ * text input — exactly the gap the picker fills); the overlaid calendar
+ * button opens the library's MonthPicker in an anchored Popover, and a
+ * pick writes the input exactly the way typing does. Values are the
+ * native input's "YYYY-MM" strings.
+ */
+declare const MonthPickerInput: import("svelte").Component<Props, {}, "">;
+type MonthPickerInput = ReturnType<typeof MonthPickerInput>;
+export default MonthPickerInput;

package/dist/inputs/picker-frame.svelte

@@ -0,0 +1,199 @@
+<!-- @component
+INTERNAL shared frame for the picker inputs (DatePickerInput,
+MonthPickerInput, WeekPickerInput) — not exported. A real native input
+wired to a SvelteKit remote form field stays the FormData carrier
+(typeable, native mobile pickers intact), with a calendar trigger button
+overlaid on its end that opens the given picker in an anchored Popover.
+
+A pick writes the input THE WAY TYPING DOES: DOM value first, then a real
+bubbling `input` event. Kit's form-level listener reads the element's
+value into field state, and the Form validates and marks the field
+touched in exactly the order manual entry would — one write path, no
+special programmatic branch.
+-->
+<script lang="ts">
+  import { tick, type Snippet } from "svelte";
+  import { CalendarIcon } from "@lucide/svelte";
+  import { cn } from "@privaty/ui/cn.js";
+  import FieldFrame from "@privaty/ui/components/field-frame.svelte";
+  import type { LabelStyle } from "@privaty/ui/components/types.js";
+  import { getUiConfig } from "@privaty/ui/config/context.js";
+  import { getUiDensity } from "@privaty/ui/config/density.js";
+  import Popover from "@privaty/ui/overlays/popover.svelte";
+  import { coreTheme } from "@privaty/ui/theme.js";
+  import type { DateField, DateFieldType } from "../types/field";
+  import { wireField } from "./wire-field";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind (structural slice). */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** The native carrier type — also the value format the picker speaks. */
+    type: Extract<DateFieldType, "date" | "month" | "week">;
+
+    /** Label placement — no floating (see DateInput). */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+
+    /** ISO-style string in the chosen type's format. */
+    initialValue?: string;
+
+    /** Native bounds, forwarded to the input (the wrappers also forward
+     * them to their picker). */
+    min?: string;
+    max?: string;
+
+    class?: string;
+    labelClass?: string;
+    inputClass?: string;
+    markerClass?: string;
+    errorClass?: string;
+
+    /** Renders the picker inside the Popover panel. `value` is the field's
+     * current string; wire `select` to the picker's `onselect`. */
+    picker: Snippet<[{ value: string; select: (iso: string) => void }]>;
+  }
+
+  const {
+    field,
+    label,
+    type,
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+    readonly = false,
+
+    initialValue = "",
+
+    min,
+    max,
+
+    class: classes,
+    labelClass,
+    inputClass,
+    markerClass,
+    errorClass,
+
+    picker,
+  }: Props = $props();
+
+  const config = getUiConfig();
+
+  const attributes = $derived(field.as(type, initialValue));
+
+  // The field, type, and initialValue are stable for the component's lifetime,
+  // so capturing the initial name and registration is intentional.
+  // svelte-ignore state_referenced_locally
+  const name = attributes.name;
+
+  // svelte-ignore state_referenced_locally
+  const wired = wireField({
+    name,
+    initialValue,
+    required,
+    issues: () => field.issues(),
+    getValue: () => field.value(),
+    setValue: (value) => field.set(value as string),
+    normalize: (value) => (value == null ? "" : String(value)),
+  });
+
+  const densityContext = getUiDensity();
+  const compact = $derived(densityContext.density === "compact");
+
+  // What the picker highlights: the field's live value (Kit tracks
+  // undefined until the first edit — the seed stands in).
+  const currentValue = $derived(String(field.value() ?? initialValue));
+
+  const uid = $props.id();
+  const locked = $derived(disabled || readonly || wired.state.isSubmitting);
+
+  let inputElement = $state<HTMLInputElement>();
+  let triggerElement = $state<HTMLButtonElement>();
+  let open = $state(false);
+
+  function select(iso: string) {
+    // The popover can outlive its trigger's enabled state (a submit that
+    // starts while it is open) — a locked control accepts no picks.
+    if (!inputElement || locked) return;
+    inputElement.value = iso;
+    // A real bubbling event — Kit's and the Form's listeners sit on the
+    // <form>, and Svelte delegates besides.
+    inputElement.dispatchEvent(new Event("input", { bubbles: true }));
+    open = false;
+    // The focused cell just left the top layer with the panel — hand focus
+    // back to the trigger, the way light dismiss does.
+    void tick().then(() => triggerElement?.focus());
+  }
+</script>
+
+<FieldFrame
+  id={uid}
+  {label}
+  {labelStyle}
+  errors={wired.errors}
+  marker={wired.marker}
+  class={classes}
+  {labelClass}
+  markerClass={cn(required && "text-red-700 dark:text-red-500", markerClass)}
+  {errorClass}
+>
+  {#snippet control({ id, errorsId })}
+    <span class="relative block w-full">
+      <input
+        {...attributes}
+        bind:this={inputElement}
+        {id}
+        class={cn(
+          coreTheme.controlBase,
+          coreTheme.controlSurface,
+          compact
+            ? coreTheme.controlPadding.compact
+            : coreTheme.controlPadding.comfortable,
+          // Our trigger replaces Chromium's built-in indicator; pr-8 keeps
+          // the text clear of the overlaid button.
+          "pr-8 [&::-webkit-calendar-picker-indicator]:hidden",
+          // Firefox refuses to hide its own date icon (Bugzilla 1830890) —
+          // there the native affordance wins for dates: our trigger steps
+          // aside (below) and the padding returns to base. The @supports
+          // (-moz-appearance) detect matches Gecko only. Month/week draw
+          // no native icon anywhere, so they keep our trigger everywhere.
+          type === "date" && "supports-[-moz-appearance:none]:pr-2",
+          inputClass,
+        )}
+        aria-describedby={errorsId}
+        aria-invalid={wired.errors.length > 0 ? true : undefined}
+        {disabled}
+        readonly={readonly || wired.state.isSubmitting}
+        {min}
+        {max}
+      />
+      <Popover bind:open placement="bottom-end">
+        {#snippet trigger(props)}
+          <button
+            type="button"
+            bind:this={triggerElement}
+            {...props}
+            class={cn(
+              coreTheme.controlTrigger,
+              // See the input's class note: Firefox dates use the native
+              // icon and picker instead of a doubled affordance.
+              type === "date" && "supports-[-moz-appearance:none]:hidden",
+            )}
+            disabled={locked}
+            title={config.labels.calendar.open}
+          >
+            <CalendarIcon class="size-4" aria-hidden="true" />
+            <span class="sr-only">{config.labels.calendar.open}</span>
+          </button>
+        {/snippet}
+        {@render picker({ value: currentValue, select })}
+      </Popover>
+    </span>
+  {/snippet}
+</FieldFrame>

package/dist/inputs/picker-frame.svelte.d.ts

@@ -0,0 +1,49 @@
+import { type Snippet } from "svelte";
+import type { LabelStyle } from "@privaty/ui/components/types.js";
+import type { DateField, DateFieldType } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind (structural slice). */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** The native carrier type — also the value format the picker speaks. */
+    type: Extract<DateFieldType, "date" | "month" | "week">;
+    /** Label placement — no floating (see DateInput). */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** ISO-style string in the chosen type's format. */
+    initialValue?: string;
+    /** Native bounds, forwarded to the input (the wrappers also forward
+     * them to their picker). */
+    min?: string;
+    max?: string;
+    class?: string;
+    labelClass?: string;
+    inputClass?: string;
+    markerClass?: string;
+    errorClass?: string;
+    /** Renders the picker inside the Popover panel. `value` is the field's
+     * current string; wire `select` to the picker's `onselect`. */
+    picker: Snippet<[{
+        value: string;
+        select: (iso: string) => void;
+    }]>;
+}
+/**
+ * INTERNAL shared frame for the picker inputs (DatePickerInput,
+ * MonthPickerInput, WeekPickerInput) — not exported. A real native input
+ * wired to a SvelteKit remote form field stays the FormData carrier
+ * (typeable, native mobile pickers intact), with a calendar trigger button
+ * overlaid on its end that opens the given picker in an anchored Popover.
+ *
+ * A pick writes the input THE WAY TYPING DOES: DOM value first, then a real
+ * bubbling `input` event. Kit's form-level listener reads the element's
+ * value into field state, and the Form validates and marks the field
+ * touched in exactly the order manual entry would — one write path, no
+ * special programmatic branch.
+ */
+declare const PickerFrame: import("svelte").Component<Props, {}, "">;
+type PickerFrame = ReturnType<typeof PickerFrame>;
+export default PickerFrame;

package/dist/inputs/week-picker-input.svelte

@@ -0,0 +1,108 @@
+<!-- @component
+Week field with a cross-browser picker popover, wired to a SvelteKit
+remote form field — must render inside a <Form>. The native week input
+stays visible as the FormData carrier (Firefox renders it as a plain
+text input — exactly the gap the picker fills); the overlaid calendar
+button opens the library's WeekPicker in an anchored Popover, and a pick
+writes the input exactly the way typing does. Values are the native
+input's "YYYY-Www" strings (ISO-8601 weeks, the Danish convention).
+-->
+<script lang="ts">
+  import WeekPicker from "@privaty/ui/calendar/week-picker.svelte";
+  import type { LabelStyle } from "@privaty/ui/components/types.js";
+  import type { DateField } from "../types/field";
+  import PickerFrame from "./picker-frame.svelte";
+
+  interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+
+    /** Label placement: "top" (default), "left", or "hidden". No floating
+     * (see DateInput). */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker. Validation itself comes from the field's schema. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly (and the calendar trigger disables) while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly and disables the calendar trigger. */
+    readonly?: boolean;
+
+    /** Initial "YYYY-Www" value. */
+    initialValue?: string;
+
+    /** Inclusive "YYYY-Www" bounds, applied to BOTH the native input and
+     * the picker (out-of-range weeks render disabled). */
+    min?: string;
+    max?: string;
+
+    /** BCP 47 tag for the picker's names — overrides `UiConfig.locale`.
+     * The grid itself is always Monday-first (ISO weeks are only
+     * well-defined that way). */
+    locale?: string;
+
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+  }
+
+  const {
+    field,
+    label,
+
+    labelStyle,
+
+    required = false,
+    disabled = false,
+    readonly = false,
+
+    initialValue = "",
+
+    min,
+    max,
+
+    locale,
+
+    class: classes,
+    labelClass,
+    inputClass,
+    markerClass,
+    errorClass,
+  }: Props = $props();
+</script>
+
+<PickerFrame
+  {field}
+  {label}
+  type="week"
+  {labelStyle}
+  {required}
+  {disabled}
+  {readonly}
+  {initialValue}
+  {min}
+  {max}
+  class={classes}
+  {labelClass}
+  {inputClass}
+  {markerClass}
+  {errorClass}
+>
+  {#snippet picker({ value, select })}
+    <WeekPicker {value} onselect={select} {min} {max} {locale} />
+  {/snippet}
+</PickerFrame>

package/dist/inputs/week-picker-input.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { LabelStyle } from "@privaty/ui/components/types.js";
+import type { DateField } from "../types/field";
+interface Props {
+    /** The SvelteKit remote form field to bind. Structural — anything
+     * satisfying the DateField slice works, e.g. a fake from the public
+     * testing subpath. */
+    field: DateField;
+    /** Visible label text for the control. */
+    label: string;
+    /** Label placement: "top" (default), "left", or "hidden". No floating
+     * (see DateInput). */
+    labelStyle?: Exclude<LabelStyle, "floating">;
+    /** Marks the field required: feeds the majority-aware required/optional
+     * marker. Validation itself comes from the field's schema. */
+    required?: boolean;
+    /** Disables the control. Disabled controls are excluded from FormData —
+     * never disable to lock the form during submit; the input already turns
+     * readonly (and the calendar trigger disables) while submitting. */
+    disabled?: boolean;
+    /** Renders the input readonly and disables the calendar trigger. */
+    readonly?: boolean;
+    /** Initial "YYYY-Www" value. */
+    initialValue?: string;
+    /** Inclusive "YYYY-Www" bounds, applied to BOTH the native input and
+     * the picker (out-of-range weeks render disabled). */
+    min?: string;
+    max?: string;
+    /** BCP 47 tag for the picker's names — overrides `UiConfig.locale`.
+     * The grid itself is always Monday-first (ISO weeks are only
+     * well-defined that way). */
+    locale?: string;
+    /** Extra classes for the outer field wrapper. */
+    class?: string;
+    /** Extra classes for the <label> element. */
+    labelClass?: string;
+    /** Extra classes for the <input> element. */
+    inputClass?: string;
+    /** Extra classes for the required/optional marker. */
+    markerClass?: string;
+    /** Extra classes for the error <ul>. */
+    errorClass?: string;
+}
+/**
+ * Week field with a cross-browser picker popover, wired to a SvelteKit
+ * remote form field — must render inside a <Form>. The native week input
+ * stays visible as the FormData carrier (Firefox renders it as a plain
+ * text input — exactly the gap the picker fills); the overlaid calendar
+ * button opens the library's WeekPicker in an anchored Popover, and a pick
+ * writes the input exactly the way typing does. Values are the native
+ * input's "YYYY-Www" strings (ISO-8601 weeks, the Danish convention).
+ */
+declare const WeekPickerInput: import("svelte").Component<Props, {}, "">;
+type WeekPickerInput = ReturnType<typeof WeekPickerInput>;
+export default WeekPickerInput;

package/dist/testing/tailwind.css

@@ -0,0 +1,5 @@
+/* Loads Tailwind into browser-mode specs that assert real computed styles —
+   component classes are inert without it (e.g. the picker trigger's
+   Firefox-only display:none never applies). Same recipe as @privaty/ui's
+   testing stylesheet: v4 auto-detects sources from the repo root. */
+@import "tailwindcss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privaty/ui-forms",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,9 +41,10 @@
   "peerDependencies": {
     "@sveltejs/kit": "^3.0.0-next.0",
     "svelte": "^5.0.0",
-    "@privaty/ui": "^0.1.5"
+    "@privaty/ui": "^0.2.0"
   },
   "dependencies": {
+    "@lucide/svelte": "^1.34.0",
     "@standard-schema/spec": "^1.1.0"
   },
   "devDependencies": {
@@ -55,8 +56,8 @@
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
     "@config/eslint": "0.0.0",
-    "@privaty/ui": "0.1.5",
-    "@config/typescript": "0.0.0"
+    "@config/typescript": "0.0.0",
+    "@privaty/ui": "0.2.0"
   },
   "scripts": {
     "check": "svelte-check --tsconfig ./tsconfig.json",