# MonthPicker

A year and month picker that coordinates two wheel pickers around a `Temporal.PlainYearMonth` value.

## Usage

Use standalone.
```svelte
<MonthPicker {...props} />
```

## Anatomy

The `class` attribute values represent part names, and `conditional` indicates elements that are rendered conditionally. Other attributes represent their corresponding props. Embedded `WheelPicker` components render in the order specified by `order`.

```svelte
<div class="whole" role="group">
  <div class="left" conditional>{left}</div>
  <WheelPicker /> year or month
  <div class="middle" conditional>{middle}</div>
  <WheelPicker /> month or year
  <div class="right" conditional>{right}</div>
</div>
```

- The year and month wheels coordinate a single `Temporal.PlainYearMonth` value.
- `min` and `max` constrain both wheels; selecting a boundary year clamps invalid months into range.
- `year` and `month` are nested config bags spread into the embedded `WheelPicker` components.

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `value` | `Temporal.PlainYearMonth` | - | Bindable selected year-month; defaults from `Temporal.Now` when omitted |
| `min` | `Temporal.PlainYearMonth` | - | Lower bound; defaults to 100 years before the initial value |
| `max` | `Temporal.PlainYearMonth` | - | Upper bound; defaults to 100 years after the initial value |
| `order` | `<enum>[]` | `["year","month"]` | Controls wheel order and tab order; invalid or duplicate entries normalize to one year wheel and one month wheel |
| `locale` | `string` | - | Locale for displayed month and year text |
| `monthLabel` | `(month: number) => string` | - | Custom month label formatter |
| `yearLabel` | `(year: number) => string` | - | Custom year label formatter |
| `left` | `Snippet` | - | Optional separator snippet before the wheels |
| `middle` | `Snippet` | - | Optional separator snippet between the wheels |
| `right` | `Snippet` | - | Optional separator snippet after the wheels |
| `year` | `WheelPickerProps` | - | Nested config bag spread into the year `WheelPicker`; `MonthPicker` owns options, value coordination, and variant |
| `month` | `WheelPickerProps` | - | Nested config bag spread into the month `WheelPicker`; `MonthPicker` owns options, value coordination, and variant |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Variant passed to the embedded `WheelPicker` components |
## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

The embedded `WheelPicker` components receive the supplied `variant`. Their active and inactive row states follow `WheelPicker` behavior.

### Default Class Name

`svs-monthpicker`

## Behavior

- Two `_WheelPicker`s coordinate a single `Temporal.PlainYearMonth` value.
- Year/month options are bounded by `min`/`max`, defaulting to a +/-100 year window.
- Boundary year selection clamps the month into range; `order` controls wheel and tab order.

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Picker (`whole` `<div>`): `role="group"`.

The year and month controls are `WheelPicker` children. See [WheelPicker](/docs/wheel-picker) for each wheel's ARIA attributes and keyboard behavior.

## Exports

### Types

```ts
interface MonthPickerProps {
  value?: Temporal.PlainYearMonth; // bindable; current year-month (Temporal.Now)
  min?: Temporal.PlainYearMonth; // lower bound (value.year - 100, month 1)
  max?: Temporal.PlainYearMonth; // upper bound (value.year + 100, month 12)
  order?: ("year" | "month")[]; // (["year","month"])
  locale?: string;
  monthLabel?: (month: number) => string;
  yearLabel?: (year: number) => string;
  left?: Snippet<[string]>; // Snippet<[variant]>
  middle?: Snippet<[string]>; // Snippet<[variant]>
  right?: Snippet<[string]>; // Snippet<[variant]>
  year?: Omit<WheelPickerProps, "options" | "value" | "variant">;
  month?: Omit<WheelPickerProps, "options" | "value" | "variant">;
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
}
type MonthPickerReqdProps = never;
type MonthPickerBindProps = "value";
```

### Others

No additional exports are available.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=MonthPickerBasic.svelte
<script lang="ts">
  import { MonthPicker } from "svseeds";

  let value = $state<Temporal.PlainYearMonth>();
  const childStyle = {
    whole: "h-36 w-28 overflow-hidden rounded-md border bg-white dark:bg-black",
    middle: "h-full",
    label: {
      base: "flex h-9 items-center justify-center text-sm",
      active: "font-bold",
    },
    aux: "inset-y-0 inset-x-2 my-auto h-9 rounded-md border",
    extra: "inset-0 bg-linear-to-b from-white via-transparent to-white dark:from-black dark:to-black",
  };
  const wheel = {
    styling: childStyle,
  };
  const styling = {
    whole: "flex items-center gap-2",
  };
  const myProps = {
    styling,
    year: wheel,
    month: wheel,
  };
</script>

<div class="flex flex-col items-center gap-3">
  <MonthPicker bind:value {...myProps} />
  <div class="text-sm">{value?.toString()}</div>
</div>
```
### With Interactive Variant

**Code**

```svelte src=MonthPickerPract.svelte
<script lang="ts">
  import { MonthPicker } from "svseeds";

  let { variant = $bindable() } = $props();
  let value = $state<Temporal.PlainYearMonth>();
  const variantStyle = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const childStyle1 = {
    whole: "h-30 w-15 overflow-hidden rounded-md",
    middle: "h-full",
    label: {
      base: "flex ps-2 h-6 items-center justify-center text-sm",
      active: "font-bold",
    },
    aux: "hidden",
    extra: "inset-0 bg-linear-to-b from-white via-transparent to-white dark:from-black dark:to-black",
  };
  const childStyle2 = {
    ...childStyle1,
    whole: "h-30 w-8 overflow-hidden rounded-md",
    label: {
      base: "flex w-fit h-6 items-center justify-center text-sm",
      active: "font-bold",
    },
  };
  const styling = {
    whole: {
      base: "relative flex items-center rounded-md border bg-white dark:bg-black",
      ...variantStyle,
    },
    left: "absolute inset-y-0 inset-x-1 my-auto h-7 rounded-md opacity-50 bg-black dark:bg-white pointer-events-none",
  };
  const myProps = {
    styling,
    yearLabel: (y: number) => String(y),
    monthLabel: (m: number) => String(m).padStart(2, "0"),
    year: { styling: childStyle1 },
    month: { styling: childStyle2 },
  };
</script>

<div class="flex flex-col items-center gap-3">
  <MonthPicker bind:value {variant} {...myProps}>
    {#snippet left()}{/snippet}
  </MonthPicker>
  <div class="text-sm">{value?.toString()}</div>
</div>
```