@k2b/ui 0.49.0 → 0.51.0

package/dist/browser/inputs/ChoiceSlider.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/ChoiceSlider.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, on, Show } from \"solid-js\";\nimport { type MaybeAccessor, resolveMaybeAccessor } from \"./field-contract\";\n\nexport type ChoiceSliderOption = {\n  value: string;\n  label: string;\n  /** One short line shown below the label line while this stop is active. */\n  description?: string;\n  /** Makes the stop unavailable. The text replaces the description when someone reaches the stop. */\n  disabledReason?: string;\n  /** Spoken value; defaults to the label and the description or reason. */\n  valueText?: string;\n};\n\nexport type ChoiceSliderProps = {\n  options: readonly ChoiceSliderOption[];\n  /** The chosen stop. `null` shows no thumb, for a choice that is none of the stops. */\n  value: MaybeAccessor<string | null>;\n  /** A person released the thumb on a stop or moved to one with the keyboard. */\n  onValueChange?: (value: string) => void;\n  /** The stop the slider shows while someone drags or arrows through it; `null` when it shows `value` again. */\n  onActiveChange?: (value: string | null) => void;\n  /** Line text while no stop is chosen. */\n  description?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  id?: string;\n  class?: string;\n  disabled?: boolean;\n  /** `lg` gives a 44 px track and a 28 px thumb for touch sheets. */\n  size?: \"md\" | \"lg\";\n};\n\nconst position = (index: number, count: number) => (count < 2 ? 0 : (index / (count - 1)) * 100);\n\n/**\n * A slider over a few named stops. The fixed line above the track always shows\n * the active stop's description, or why a stop cannot be chosen; its height\n * never changes. Unavailable stops stay visible and are skipped.\n */\nexport function ChoiceSlider(props: ChoiceSliderProps): JSX.Element {\n  // The previewed stop by value, so a change of the options can never leave it pointing at another stop.\n  const [previewValue, setPreviewValue] = createSignal<string | null>(null);\n  const [notice, setNotice] = createSignal<string | null>(null);\n  let track: HTMLDivElement | undefined;\n  let drag: { pointerId: number; blocked: number | null; startX: number } | null = null;\n\n  const count = () => props.options.length;\n  const chosen = createMemo(() => {\n    const value = resolveMaybeAccessor(props.value);\n    return value === null ? -1 : props.options.findIndex((option) => option.value === value);\n  });\n  const preview = createMemo(() => {\n    const value = previewValue();\n    const index = value === null ? -1 : props.options.findIndex((option) => option.value === value);\n    return index < 0 ? null : index;\n  });\n  const setPreview = (index: number | null) => setPreviewValue(index === null ? null : (props.options[index]?.value ?? null));\n  const shown = () => preview() ?? chosen();\n  const option = () => props.options[shown()];\n  const available = (index: number) => props.options[index] !== undefined && !props.options[index]?.disabledReason;\n  const warning = () => notice() ?? (preview() === null ? (option()?.disabledReason ?? null) : null);\n  const line = () => warning() ?? option()?.description ?? (shown() < 0 ? props.description : undefined) ?? \"\";\n\n  createEffect(\n    on(chosen, () => {\n      setPreview(null);\n      setNotice(null);\n    }),\n  );\n  // A drag ends without a choice when its stop disappears, becomes unavailable, or the slider is disabled.\n  createEffect(() => {\n    const index = preview();\n    if (previewValue() !== null && (index === null || !available(index) || props.disabled)) {\n      drag = null;\n      setPreviewValue(null);\n    }\n  });\n  createEffect(\n    on(preview, (index) => props.onActiveChange?.(index === null ? null : (props.options[index]?.value ?? null)), { defer: true }),\n  );\n\n  const valueText = () => {\n    const current = option();\n    if (!current) return props.description ?? \"\";\n    return current.valueText ?? [current.label, warning() ?? current.description].filter(Boolean).join(\", \");\n  };\n\n  const nearestAvailable = (at: number) => {\n    let best: number | null = null;\n    for (let index = 0; index < count(); index += 1) {\n      if (available(index) && (best === null || Math.abs(index - at) < Math.abs(best - at))) best = index;\n    }\n    return best;\n  };\n\n  const commit = (index: number) => {\n    const next = props.options[index];\n    setPreview(null);\n    if (next && !props.disabled && available(index) && index !== chosen()) props.onValueChange?.(next.value);\n  };\n\n  const step = (direction: 1 | -1) => {\n    const from = shown() < 0 ? (direction > 0 ? -1 : count()) : shown();\n    for (let index = from + direction; index >= 0 && index < count(); index += direction) {\n      if (available(index)) {\n        setNotice(null);\n        commit(index);\n        return;\n      }\n    }\n    const neighbour = props.options[from + direction];\n    if (neighbour?.disabledReason) setNotice(neighbour.disabledReason);\n  };\n\n  const edge = (end: boolean) => {\n    const indexes = props.options.map((_, index) => index).filter(available);\n    const target = end ? indexes.at(-1) : indexes[0];\n    if (target !== undefined) {\n      setNotice(null);\n      commit(target);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (props.disabled) return;\n    const keys: Record<string, () => void> = {\n      ArrowRight: () => step(1),\n      ArrowUp: () => step(1),\n      PageUp: () => step(1),\n      ArrowLeft: () => step(-1),\n      ArrowDown: () => step(-1),\n      PageDown: () => step(-1),\n      Home: () => edge(false),\n      End: () => edge(true),\n    };\n    const action = keys[event.key];\n    if (!action) return;\n    event.preventDefault();\n    action();\n  };\n\n  const at = (clientX: number) => {\n    const rect = track?.getBoundingClientRect();\n    if (!rect || rect.width === 0) return 0;\n    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) * (count() - 1);\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    // One pointer owns a drag; a second finger waits until it ends.\n    if (props.disabled || count() < 2 || event.button !== 0 || drag) return;\n    event.preventDefault();\n    track?.focus({ preventScroll: true });\n    track?.setPointerCapture?.(event.pointerId);\n    const near = Math.round(at(event.clientX));\n    const pressed = props.options[near];\n    if (pressed?.disabledReason) {\n      drag = { pointerId: event.pointerId, blocked: near, startX: event.clientX };\n      setNotice(pressed.disabledReason);\n      return;\n    }\n    drag = { pointerId: event.pointerId, blocked: null, startX: event.clientX };\n    setNotice(null);\n    setPreview(nearestAvailable(at(event.clientX)));\n  };\n\n  const onPointerMove = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    if (drag.blocked !== null && Math.abs(event.clientX - drag.startX) <= 2) return;\n    drag.blocked = null;\n    const next = nearestAvailable(at(event.clientX));\n    if (next !== null) {\n      setNotice(null);\n      setPreview(next);\n    }\n  };\n\n  /** Only a release chooses; a cancel or a lost capture puts the slider back on its value. */\n  const onPointerEnd = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    drag = null;\n    const index = preview();\n    if (event.type !== \"pointerup\" || index === null) {\n      setPreview(null);\n      return;\n    }\n    commit(index);\n  };\n\n  return (\n    <div class={[\"k2b-choice-slider\", props.class].filter(Boolean).join(\" \")} data-size={props.size ?? \"md\"}>\n      <p class=\"k2b-choice-slider__line\" data-tone={warning() ? \"warning\" : undefined} aria-live=\"polite\">\n        <Show when={warning()}>\n          <i class=\"ti ti-alert-triangle\" aria-hidden=\"true\" />\n        </Show>\n        <span>{line()}</span>\n      </p>\n      <Show when={count() >= 2}>\n        <div\n          ref={track}\n          id={props.id}\n          class=\"k2b-choice-slider__track\"\n          role=\"slider\"\n          tabIndex={props.disabled ? -1 : 0}\n          aria-label={props[\"aria-label\"]}\n          aria-labelledby={props[\"aria-labelledby\"]}\n          aria-valuemin={1}\n          aria-valuemax={count()}\n          aria-valuenow={Math.max(0, shown()) + 1}\n          aria-valuetext={valueText()}\n          aria-disabled={props.disabled ? \"true\" : undefined}\n          onKeyDown={onKeyDown}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={onPointerEnd}\n          onPointerCancel={onPointerEnd}\n          onLostPointerCapture={onPointerEnd}\n        >\n          <For each={props.options.slice(1)}>\n            {(_, index) => (\n              <span\n                class=\"k2b-choice-slider__segment\"\n                data-on={shown() > index() ? \"\" : undefined}\n                style={{\n                  left: `calc(${position(index(), count())}% + 8px)`,\n                  width: `calc(${position(index() + 1, count()) - position(index(), count())}% - 16px)`,\n                }}\n              />\n            )}\n          </For>\n          <For each={props.options}>\n            {(stop, index) => (\n              <span\n                class=\"k2b-choice-slider__stop\"\n                data-on={shown() > index() ? \"\" : undefined}\n                data-unavailable={stop.disabledReason ? \"\" : undefined}\n                data-current={index() === shown() ? \"\" : undefined}\n                style={{ left: `${position(index(), count())}%` }}\n              />\n            )}\n          </For>\n          <span\n            class=\"k2b-choice-slider__thumb\"\n            data-tone={warning() && preview() === null && option()?.disabledReason ? \"warning\" : undefined}\n            hidden={shown() < 0}\n            style={{ left: `${position(Math.max(0, shown()), count())}%` }}\n          />\n        </div>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/ChoiceSlider.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, on, Show } from \"solid-js\";\nimport { type MaybeAccessor, resolveMaybeAccessor } from \"./field-contract\";\n\nexport type ChoiceSliderOption = {\n  value: string;\n  label: string;\n  /** One short line shown below the label line while this stop is active. */\n  description?: string;\n  /** Makes the stop unavailable. The text replaces the description when someone reaches the stop. */\n  disabledReason?: string;\n  /** Spoken value; defaults to the label and the description or reason. */\n  valueText?: string;\n};\n\nexport type ChoiceSliderProps = {\n  options: readonly ChoiceSliderOption[];\n  /** The chosen stop. `null` shows no thumb, for a choice that is none of the stops. */\n  value: MaybeAccessor<string | null>;\n  /** A person released the thumb on a stop or moved to one with the keyboard. */\n  onValueChange?: (value: string) => void;\n  /** The stop the slider shows while someone drags or arrows through it; `null` when it shows `value` again. */\n  onActiveChange?: (value: string | null) => void;\n  /** Line text while no stop is chosen. */\n  description?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  id?: string;\n  class?: string;\n  disabled?: boolean;\n  /** `lg` gives a 44 px track and a 28 px thumb for touch sheets. */\n  size?: \"md\" | \"lg\";\n};\n\nconst position = (index: number, count: number) => (count < 2 ? 0 : (index / (count - 1)) * 100);\n\n/**\n * A slider over a few named stops. The fixed line above the track always shows\n * the active stop's description, or why a stop cannot be chosen; its height\n * never changes. Unavailable stops stay visible and are skipped.\n */\nexport function ChoiceSlider(props: ChoiceSliderProps): JSX.Element {\n  // The previewed stop by value, so a change of the options can never leave it pointing at another stop.\n  const [previewValue, setPreviewValue] = createSignal<string | null>(null);\n  const [notice, setNotice] = createSignal<string | null>(null);\n  let track: HTMLDivElement | undefined;\n  let drag: { pointerId: number; blocked: number | null; startX: number } | null = null;\n\n  const count = () => props.options.length;\n  const chosen = createMemo(() => {\n    const value = resolveMaybeAccessor(props.value);\n    return value === null ? -1 : props.options.findIndex((option) => option.value === value);\n  });\n  const preview = createMemo(() => {\n    const value = previewValue();\n    const index = value === null ? -1 : props.options.findIndex((option) => option.value === value);\n    return index < 0 ? null : index;\n  });\n  const setPreview = (index: number | null) => setPreviewValue(index === null ? null : (props.options[index]?.value ?? null));\n  const shown = () => preview() ?? chosen();\n  const option = () => props.options[shown()];\n  const available = (index: number) => props.options[index] !== undefined && !props.options[index]?.disabledReason;\n  const warning = () => notice() ?? (preview() === null ? (option()?.disabledReason ?? null) : null);\n  const line = () => warning() ?? option()?.description ?? (shown() < 0 ? props.description : undefined) ?? \"\";\n\n  createEffect(\n    on(chosen, () => {\n      setPreview(null);\n      setNotice(null);\n    }),\n  );\n  // A drag ends without a choice when its stop disappears, becomes unavailable, or the slider is disabled.\n  createEffect(() => {\n    const index = preview();\n    if (previewValue() !== null && (index === null || !available(index) || props.disabled)) {\n      drag = null;\n      setPreviewValue(null);\n    }\n  });\n  createEffect(\n    on(preview, (index) => props.onActiveChange?.(index === null ? null : (props.options[index]?.value ?? null)), { defer: true }),\n  );\n\n  const valueText = () => {\n    const current = option();\n    if (!current) return props.description ?? \"\";\n    return current.valueText ?? [current.label, warning() ?? current.description].filter(Boolean).join(\", \");\n  };\n\n  const nearestAvailable = (at: number) => {\n    let best: number | null = null;\n    for (let index = 0; index < count(); index += 1) {\n      if (available(index) && (best === null || Math.abs(index - at) < Math.abs(best - at))) best = index;\n    }\n    return best;\n  };\n\n  const commit = (index: number) => {\n    const next = props.options[index];\n    setPreview(null);\n    if (next && !props.disabled && available(index) && index !== chosen()) props.onValueChange?.(next.value);\n  };\n\n  const step = (direction: 1 | -1) => {\n    const from = shown() < 0 ? (direction > 0 ? -1 : count()) : shown();\n    for (let index = from + direction; index >= 0 && index < count(); index += direction) {\n      if (available(index)) {\n        setNotice(null);\n        commit(index);\n        return;\n      }\n    }\n    const neighbour = props.options[from + direction];\n    if (neighbour?.disabledReason) setNotice(neighbour.disabledReason);\n  };\n\n  const edge = (end: boolean) => {\n    const indexes = props.options.map((_, index) => index).filter(available);\n    const target = end ? indexes.at(-1) : indexes[0];\n    if (target !== undefined) {\n      setNotice(null);\n      commit(target);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (props.disabled) return;\n    const keys: Record<string, () => void> = {\n      ArrowRight: () => step(1),\n      ArrowUp: () => step(1),\n      PageUp: () => step(1),\n      ArrowLeft: () => step(-1),\n      ArrowDown: () => step(-1),\n      PageDown: () => step(-1),\n      Home: () => edge(false),\n      End: () => edge(true),\n    };\n    const action = keys[event.key];\n    if (!action) return;\n    event.preventDefault();\n    action();\n  };\n\n  const at = (clientX: number) => {\n    const rect = track?.getBoundingClientRect();\n    if (!rect || rect.width === 0) return 0;\n    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) * (count() - 1);\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    // One pointer owns a drag; a second finger waits until it ends.\n    if (props.disabled || count() < 2 || event.button !== 0 || drag) return;\n    event.preventDefault();\n    // A pointer press focuses the track without the keyboard focus ring.\n    track?.focus({ preventScroll: true, focusVisible: false });\n    track?.setPointerCapture?.(event.pointerId);\n    const near = Math.round(at(event.clientX));\n    const pressed = props.options[near];\n    if (pressed?.disabledReason) {\n      drag = { pointerId: event.pointerId, blocked: near, startX: event.clientX };\n      setNotice(pressed.disabledReason);\n      return;\n    }\n    drag = { pointerId: event.pointerId, blocked: null, startX: event.clientX };\n    setNotice(null);\n    setPreview(nearestAvailable(at(event.clientX)));\n  };\n\n  const onPointerMove = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    if (drag.blocked !== null && Math.abs(event.clientX - drag.startX) <= 2) return;\n    drag.blocked = null;\n    const next = nearestAvailable(at(event.clientX));\n    if (next !== null) {\n      setNotice(null);\n      setPreview(next);\n    }\n  };\n\n  /** Only a release chooses; a cancel or a lost capture puts the slider back on its value. */\n  const onPointerEnd = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    drag = null;\n    const index = preview();\n    if (event.type !== \"pointerup\" || index === null) {\n      setPreview(null);\n      return;\n    }\n    commit(index);\n  };\n\n  return (\n    <div class={[\"k2b-choice-slider\", props.class].filter(Boolean).join(\" \")} data-size={props.size ?? \"md\"}>\n      <p class=\"k2b-choice-slider__line\" data-tone={warning() ? \"warning\" : undefined} aria-live=\"polite\">\n        <Show when={warning()}>\n          <i class=\"ti ti-alert-triangle\" aria-hidden=\"true\" />\n        </Show>\n        <span>{line()}</span>\n      </p>\n      <Show when={count() >= 2}>\n        <div\n          ref={track}\n          id={props.id}\n          class=\"k2b-choice-slider__track\"\n          role=\"slider\"\n          tabIndex={props.disabled ? -1 : 0}\n          aria-label={props[\"aria-label\"]}\n          aria-labelledby={props[\"aria-labelledby\"]}\n          aria-valuemin={1}\n          aria-valuemax={count()}\n          aria-valuenow={Math.max(0, shown()) + 1}\n          aria-valuetext={valueText()}\n          aria-disabled={props.disabled ? \"true\" : undefined}\n          data-dragging={preview() !== null ? \"\" : undefined}\n          style={{ \"--k2b-choice-slider-at\": `${position(Math.max(0, shown()), count())}%` }}\n          onKeyDown={onKeyDown}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={onPointerEnd}\n          onPointerCancel={onPointerEnd}\n          onLostPointerCapture={onPointerEnd}\n        >\n          <span class=\"k2b-choice-slider__rail\" />\n          <span class=\"k2b-choice-slider__fill\" hidden={shown() < 0} />\n          <For each={props.options}>\n            {(stop, index) => (\n              <span\n                class=\"k2b-choice-slider__stop\"\n                data-on={shown() > index() ? \"\" : undefined}\n                data-unavailable={stop.disabledReason ? \"\" : undefined}\n                data-current={index() === shown() ? \"\" : undefined}\n                style={{ left: `${position(index(), count())}%` }}\n              />\n            )}\n          </For>\n          <span\n            class=\"k2b-choice-slider__thumb\"\n            data-tone={warning() && preview() === null && option()?.disabledReason ? \"warning\" : undefined}\n            hidden={shown() < 0}\n          />\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport type ChoiceSliderIndicatorProps = {\n  /** How many stops the slider it stands for has. */\n  count: number;\n  /** The chosen stop's index, or `null` (or a negative index) for a choice that is none of the stops. */\n  index: number | null;\n  class?: string;\n};\n\n/**\n * The slider in small and without interaction, 24 px wide: rail, fill and thumb in the same look, for a trigger that\n * opens the real slider. It is decoration; the trigger's own label says the value.\n */\nexport function ChoiceSliderIndicator(props: ChoiceSliderIndicatorProps): JSX.Element {\n  const at = () => (props.index === null || props.index < 0 ? null : position(Math.min(props.index, props.count - 1), props.count));\n  return (\n    <span class={[\"k2b-choice-slider\", props.class].filter(Boolean).join(\" \")} data-size=\"indicator\" aria-hidden=\"true\">\n      <span class=\"k2b-choice-slider__track\" style={{ \"--k2b-choice-slider-at\": `${at() ?? 0}%` }}>\n        <span class=\"k2b-choice-slider__rail\" />\n        <span class=\"k2b-choice-slider__fill\" hidden={at() === null} />\n        <span class=\"k2b-choice-slider__thumb\" hidden={at() === null} />\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAY,EAAE,EAAE,IAAI,QAAQ,UAAU;AAC1F,SAA6B,oBAAoB,QAAQ,kBAAkB;AAgC3E,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,KAAa,KAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAI,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,GAAI,GAAI;;AAEhG;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,YAAY,CAAC,KAAwB,EAAe;EAClE;EACA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,YAAY,CAAgB,IAAI,CAAC;EACzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAgB,IAAI,CAAC;EAC7D,IAAI,KAAiC;EACrC,IAAI,IAA0E,GAAG,IAAI;EAErF,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,MAAM;EACxC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM;IAC9B,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/C,OAAO,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAE,MAAM,IAAK,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;EAC1F,CAAC,CAAC;EACF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM;IAC/B,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC;IAC5B,MAAM,KAAK,GAAG,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAE,MAAM,IAAK,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;IAC/F,OAAO,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,KAAK;EACjC,CAAC,CAAC;EACF,MAAM,UAAU,GAAI,KAAoB,IAAK,eAAe,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,GAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,IAAK,CAAC;EAC3H,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;EACzC,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;EAC3C,MAAM,SAAS,GAAI,KAAa,IAAK,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,cAAc;EAChH,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,KAAK,IAAI,GAAI,MAAM,CAAC,CAAC,EAAE,cAAc,IAAI,IAAI,GAAI,IAAI,CAAC;EAClG,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,EAAE;EAE5G,YAAY,CACV,EAAE,CAAC,MAAM,EAAE,MAAM;IACf,UAAU,CAAC,IAAI,CAAC;IAChB,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC,CACH,CAAC;EACD;EACA,YAAY,CAAC,MAAM;IACjB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC;IACvB,IAAI,YAAY,CAAC,CAAC,KAAK,IAAI,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;MACtF,IAAI,GAAG,IAAI;MACX,eAAe,CAAC,IAAI,CAAC;IACvB;EACF,CAAC,CAAC;EACF,YAAY,CACV,EAAE,CAAC,OAAO,EAAG,KAAK,IAAK,KAAK,CAAC,cAAc,GAAG,KAAK,KAAK,IAAI,GAAG,IAAI,GAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,IAAK,CAAC,EAAE;IAAE,KAAK,EAAE;EAAK,CAAC,CAC/H,CAAC;EAED,MAAM,SAAS,GAAG,MAAM;IACtB,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,CAAC,WAAW,IAAI,EAAE;IAC5C,OAAO,OAAO,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;EAC1G,CAAC;EAED,MAAM,gBAAgB,GAAI,EAAU,IAAK;IACvC,IAAI,IAAmB,GAAG,IAAI;IAC9B,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE;MAC/C,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK;IACrG;IACA,OAAO,IAAI;EACb,CAAC;EAED,MAAM,MAAM,GAAI,KAAa,IAAK;IAChC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IACjC,UAAU,CAAC,IAAI,CAAC;IAChB,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;EAC1G,CAAC;EAED,MAAM,IAAI,GAAI,SAAiB,IAAK;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAI,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAI,KAAK,CAAC,CAAC;IACnE,KAAK,IAAI,KAAK,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,KAAK,IAAI,SAAS,EAAE;MACpF,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,MAAM,CAAC,KAAK,CAAC;QACb;MACF;IACF;IACA,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;IACjD,IAAI,SAAS,EAAE,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;EACpE,CAAC;EAED,MAAM,IAAI,GAAI,GAAY,IAAK;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;IACxE,MAAM,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAChD,IAAI,MAAM,KAAK,SAAS,EAAE;MACxB,SAAS,CAAC,IAAI,CAAC;MACf,MAAM,CAAC,MAAM,CAAC;IAChB;EACF,CAAC;EAED,MAAM,SAAS,GAAI,KAAoB,IAAK;IAC1C,IAAI,KAAK,CAAC,QAAQ,EAAE;IACpB,MAAM,IAAgC,GAAG;MACvC,UAAU,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;MACzB,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;MACtB,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;MACrB,SAAS,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC;MACzB,SAAS,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC;MACzB,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC;MACxB,IAAI,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;MACvB,GAAG,EAAE,MAAM,IAAI,CAAC,IAAI;IACtB,CAAC;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;IAC9B,IAAI,CAAC,MAAM,EAAE;IACb,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,CAAC,CAAC;EACV,CAAC;EAED,MAAM,EAAE,GAAI,OAAe,IAAK;IAC9B,MAAM,IAAI,GAAG,KAAK,EAAE,qBAAqB,CAAC,CAAC;IAC3C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,OAAO,CAAC;IACvC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;EACrF,CAAC;EAED,MAAM,aAAa,GAAI,KAAmB,IAAK;IAC7C;IACA,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,EAAE;IACjE,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB;IACA,KAAK,EAAE,KAAK,CAAC;MAAE,aAAa,EAAE,IAAI;MAAE,YAAY,EAAE;IAAM,CAAC,CAAC;IAC1D,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IACnC,IAAI,OAAO,EAAE,cAAc,EAAE;MAC3B,IAAI,GAAG;QAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAAE,OAAO,EAAE,IAAI;QAAE,MAAM,EAAE,KAAK,CAAC;MAAQ,CAAC;MAC3E,SAAS,CAAC,OAAO,CAAC,cAAc,CAAC;MACjC;IACF;IACA,IAAI,GAAG;MAAE,SAAS,EAAE,KAAK,CAAC,SAAS;MAAE,OAAO,EAAE,IAAI;MAAE,MAAM,EAAE,KAAK,CAAC;IAAQ,CAAC;IAC3E,SAAS,CAAC,IAAI,CAAC;IACf,UAAU,CAAC,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;EACjD,CAAC;EAED,MAAM,aAAa,GAAI,KAAmB,IAAK;IAC7C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;IACjD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;IACzE,IAAI,CAAC,OAAO,GAAG,IAAI;IACnB,MAAM,IAAI,GAAG,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAChD,IAAI,IAAI,KAAK,IAAI,EAAE;MACjB,SAAS,CAAC,IAAI,CAAC;MACf,UAAU,CAAC,IAAI,CAAC;IAClB;EACF,CAAC;;EAED;EACA,MAAM,YAAY,GAAI,KAAmB,IAAK;IAC5C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;IACjD,IAAI,GAAG,IAAI;IACX,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC;IACvB,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,UAAU,CAAC,IAAI,CAAC;MAChB;IACF;IACA,MAAM,CAAC,KAAK,CAAC;EACf,CAAC;EAED;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA,kCAGO,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,OAAO,CAAC,CAAC;MAAA;MAAA;QAAA;MAAA;IAAA;IAAA,gBAGd,IAAI;IAAA,iCAEZ,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,CAAC,IAAI,CAAC;MAAA;MAAA;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA,6CAqBE,YAAY;QAAA,wCADjB,YAAY;QAAA,oBADhB,YAAY;QAAA,sBADV,aAAa;QAAA,sBADb,aAAa;QAAA,kBADjB,SAAS;QAAA,YAdf,KAAK;QAAA,oDAAL,KAAK;QAAA,kCAuBT,GAAG;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,OAAO;UAAA;UAAA,UACrB,CAAC,IAAI,EAAE,KAAK;YAAA;YAAA;cAAA,YAGA,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,SAAS;gBAAA,QACzB,IAAI,CAAC,cAAc,GAAG,EAAE,GAAG,SAAS;gBAAA,QACxC,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,SAAS;gBAAA,QACnC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;cAAA;cAAA;cAAA;cAAA;cAAA;YAAA;cAAA;cAAA;cAAA;cAAA;YAAA;YAAA;UAAA;QAElD;QAAA;UAAA,UA/BC,KAAK,CAAC,EAAE;YAAA,OAGF,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;YAAA,OACrB,KAAK,CAAC,YAAY,CAAC;YAAA,OACd,KAAK,CAAC,iBAAiB,CAAC;YAAA,OAE1B,KAAK,CAAC,CAAC;YAAA,OACP,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;YAAA,OACvB,SAAS,CAAC,CAAC;YAAA,OACZ,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS;YAAA,OACnC,OAAO,CAAC,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,SAAS;YAAA,OACf,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;YAAA,OASlC,KAAK,CAAC,CAAC,GAAG,CAAC;YAAA,QAc5C,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,SAAS;YAAA,QACtF,KAAK,CAAC,CAAC,GAAG,CAAC;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;QAAA;QAAA;MAAA;IAAA;IAAA;MAAA,YA9Cf,CAAC,mBAAmB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAAA,QAAa,KAAK,CAAC,IAAI,IAAI,IAAI;QAAA,QACvD,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAmDrF;AAUA;AACA;AACA;AACA;AACA,OAAO,SAAS,qBAAqB,CAAC,KAAiC,EAAe;EACpF,MAAM,EAAE,GAAG,MAAO,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE;EACjI;IAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA,YACe,CAAC,mBAAmB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAAA,QACG,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;QAAA,QAEzC,EAAE,CAAC,CAAC,KAAK,IAAI;QAAA,QACZ,EAAE,CAAC,CAAC,KAAK,IAAI;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAIpE;AAAC","ignoreList":[]}

package/dist/browser/inputs/DatePicker.js

@@ -59,7 +59,7 @@ import { isWeekendKey } from "../intl/weekend";
 import { dateInputPattern, formatDateInput, parseDateInput } from "./date-input";
 import { resolveDateInputMessages } from "./date-input-messages";
 import { draftStatusText, errorText, formatDateLong, limitErrorText, rangeStatusText, restStatusText, spokenDateText, typingStatusText } from "./date-input-status";
-import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isDateKey, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, parseDateValue, pickerContext, pickRangeDay, previewRange, rangeAnchor, resolveFocusDay, splitDateTime, toDateTimeValue, weekendBands, yearMonth } from "./date-picker";
+import { dateKey, displayDate, draftDateTimeValue, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isDateKey, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, parseDateValue, pickerContext, pickRangeDay, previewRange, rangeAnchor, resolveFocusDay, splitDateTime, toDateTimeValue, weekendBands, yearMonth } from "./date-picker";
 import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
 const popoverIsOpen = popover => {
   if (!popover) return false;
@@ -346,7 +346,9 @@ function PresetRail(props) {
     }
   });
 }
-function DatePickerPanel(props) {
+
+/** One month of days. Exported for composite pickers in this package (the period picker shows two side by side). */
+export function DatePickerPanel(props) {
   const messages = useUiMessages();
   const [view, setView] = createSignal("days");
   const context = createMemo(() => pickerContext(props.dateConfig));
@@ -440,8 +442,9 @@ function DatePickerPanel(props) {
   const focusDate = date => {
     const targetKey = dateKey(date, context());
     if (blocked(targetKey)) return;
-    if (!dates.isSameMonth(date, props.visibleMonth(), context())) props.setVisibleMonth(date);
-    queueMicrotask(() => calendar?.querySelector(`[data-date-day="${targetKey}"]`)?.focus());
+    const shown = props.isShown ? props.isShown(date) : dates.isSameMonth(date, props.visibleMonth(), context());
+    if (!shown) props.setVisibleMonth(date);
+    queueMicrotask(() => (props.focusRoot?.() ?? calendar)?.querySelector(`[data-date-day="${targetKey}"]:not([data-hidden="true"])`)?.focus());
   };
   const handleDayKeyDown = (event, day) => {
     const deltas = {
@@ -514,10 +517,10 @@ function DatePickerPanel(props) {
               };
               _$insert(_el$50, name);
               _$effect(_p$ => {
-                var _v$10 = index() === month().month,
-                  _v$11 = index() === month().month ? "true" : undefined;
-                _v$10 !== _p$.e && _$setAttribute(_el$50, "aria-pressed", _p$.e = _v$10);
-                _v$11 !== _p$.t && _$setAttribute(_el$50, "data-selected", _p$.t = _v$11);
+                var _v$12 = index() === month().month,
+                  _v$13 = index() === month().month ? "true" : undefined;
+                _v$12 !== _p$.e && _$setAttribute(_el$50, "aria-pressed", _p$.e = _v$12);
+                _v$13 !== _p$.t && _$setAttribute(_el$50, "data-selected", _p$.t = _v$13);
                 return _p$;
               }, {
                 e: undefined,
@@ -573,10 +576,10 @@ function DatePickerPanel(props) {
             children: band => (() => {
               var _el$53 = _$getNextElement(_tmpl$13);
               _$effect(_p$ => {
-                var _v$12 = `${band.start + 1} / span ${band.span}`,
-                  _v$13 = `1 / span ${dayRows().length}`;
-                _v$12 !== _p$.e && _$setStyleProperty(_el$53, "grid-column", _p$.e = _v$12);
-                _v$13 !== _p$.t && _$setStyleProperty(_el$53, "grid-row", _p$.t = _v$13);
+                var _v$14 = `${band.start + 1} / span ${band.span}`,
+                  _v$15 = `1 / span ${dayRows().length}`;
+                _v$14 !== _p$.e && _$setStyleProperty(_el$53, "grid-column", _p$.e = _v$14);
+                _v$15 !== _p$.t && _$setStyleProperty(_el$53, "grid-row", _p$.t = _v$15);
                 return _p$;
               }, {
                 e: undefined,
@@ -589,7 +592,8 @@ function DatePickerPanel(props) {
             get each() {
               return dayRows();
             },
-            children: week => (() => {
+            children: week => // A week of a neighbouring month only, left empty beside a second month, is hidden as a whole.
+            (() => {
               var _el$54 = _$getNextElement(_tmpl$14);
               _$insert(_el$54, _$createComponent(For, {
                 each: week,
@@ -602,6 +606,7 @@ function DatePickerPanel(props) {
                   const active = () => selected() || isRangeEdge(cell.key, range());
                   const focusable = () => cell.key === defaultFocus();
                   const today = () => cell.key === todayKey();
+                  const hidden = () => Boolean(props.hideOutside && cell.outside);
                   const label = () => {
                     const name = today() ? todayLabel(cell.label) : cell.label;
                     return blocked(cell.key) ? inputMessages().notSelectable({
@@ -621,28 +626,30 @@ function DatePickerPanel(props) {
                     _el$55.$$click = () => props.onSelect(cell.key);
                     _$insert(_el$55, () => cell.number);
                     _$effect(_p$ => {
-                      var _v$14 = cell.key,
-                        _v$15 = focusable() ? "true" : undefined,
-                        _v$16 = cell.outside ? "true" : undefined,
-                        _v$17 = weekendColumns()[cellIndex()] ? "true" : undefined,
-                        _v$18 = inRange(cell.key, range()) && !active() ? "true" : undefined,
-                        _v$19 = today() ? "true" : undefined,
-                        _v$20 = today() ? "date" : undefined,
-                        _v$21 = label(),
-                        _v$22 = active(),
-                        _v$23 = blocked(cell.key),
-                        _v$24 = focusable() ? 0 : -1;
-                      _v$14 !== _p$.e && _$setAttribute(_el$55, "data-date-day", _p$.e = _v$14);
-                      _v$15 !== _p$.t && _$setAttribute(_el$55, "data-date-focus", _p$.t = _v$15);
-                      _v$16 !== _p$.a && _$setAttribute(_el$55, "data-outside", _p$.a = _v$16);
-                      _v$17 !== _p$.o && _$setAttribute(_el$55, "data-weekend", _p$.o = _v$17);
-                      _v$18 !== _p$.i && _$setAttribute(_el$55, "data-in-range", _p$.i = _v$18);
-                      _v$19 !== _p$.n && _$setAttribute(_el$55, "data-today", _p$.n = _v$19);
-                      _v$20 !== _p$.s && _$setAttribute(_el$55, "aria-current", _p$.s = _v$20);
-                      _v$21 !== _p$.h && _$setAttribute(_el$55, "aria-label", _p$.h = _v$21);
-                      _v$22 !== _p$.r && _$setAttribute(_el$55, "aria-selected", _p$.r = _v$22);
-                      _v$23 !== _p$.d && _$setProperty(_el$55, "disabled", _p$.d = _v$23);
-                      _v$24 !== _p$.l && _$setAttribute(_el$55, "tabindex", _p$.l = _v$24);
+                      var _v$16 = cell.key,
+                        _v$17 = focusable() ? "true" : undefined,
+                        _v$18 = cell.outside ? "true" : undefined,
+                        _v$19 = hidden() ? "true" : undefined,
+                        _v$20 = weekendColumns()[cellIndex()] ? "true" : undefined,
+                        _v$21 = inRange(cell.key, range()) && !active() ? "true" : undefined,
+                        _v$22 = today() ? "true" : undefined,
+                        _v$23 = today() ? "date" : undefined,
+                        _v$24 = label(),
+                        _v$25 = active(),
+                        _v$26 = blocked(cell.key),
+                        _v$27 = focusable() ? 0 : -1;
+                      _v$16 !== _p$.e && _$setAttribute(_el$55, "data-date-day", _p$.e = _v$16);
+                      _v$17 !== _p$.t && _$setAttribute(_el$55, "data-date-focus", _p$.t = _v$17);
+                      _v$18 !== _p$.a && _$setAttribute(_el$55, "data-outside", _p$.a = _v$18);
+                      _v$19 !== _p$.o && _$setAttribute(_el$55, "data-hidden", _p$.o = _v$19);
+                      _v$20 !== _p$.i && _$setAttribute(_el$55, "data-weekend", _p$.i = _v$20);
+                      _v$21 !== _p$.n && _$setAttribute(_el$55, "data-in-range", _p$.n = _v$21);
+                      _v$22 !== _p$.s && _$setAttribute(_el$55, "data-today", _p$.s = _v$22);
+                      _v$23 !== _p$.h && _$setAttribute(_el$55, "aria-current", _p$.h = _v$23);
+                      _v$24 !== _p$.r && _$setAttribute(_el$55, "aria-label", _p$.r = _v$24);
+                      _v$25 !== _p$.d && _$setAttribute(_el$55, "aria-selected", _p$.d = _v$25);
+                      _v$26 !== _p$.l && _$setProperty(_el$55, "disabled", _p$.l = _v$26);
+                      _v$27 !== _p$.u && _$setAttribute(_el$55, "tabindex", _p$.u = _v$27);
                       return _p$;
                     }, {
                       e: undefined,
@@ -655,13 +662,15 @@ function DatePickerPanel(props) {
                       h: undefined,
                       r: undefined,
                       d: undefined,
-                      l: undefined
+                      l: undefined,
+                      u: undefined
                     });
                     _$runHydrationEvents();
                     return _el$55;
                   })();
                 }
               }));
+              _$effect(() => _$setAttribute(_el$54, "aria-hidden", props.hideOutside && week.every(cell => cell.outside) ? "true" : undefined));
               return _el$54;
             })()
           }), _el$41, _co$1);
@@ -694,22 +703,28 @@ function DatePickerPanel(props) {
     }), _el$48, _co$11);
     _$effect(_p$ => {
       var _v$7 = messages().calendar,
-        _v$8 = stepBlocked(-1),
-        _v$9 = previousLabel(),
-        _v$0 = stepBlocked(1),
-        _v$1 = nextLabel();
+        _v$8 = props.nav === "next" ? "true" : undefined,
+        _v$9 = stepBlocked(-1),
+        _v$0 = previousLabel(),
+        _v$1 = props.nav === "previous" ? "true" : undefined,
+        _v$10 = stepBlocked(1),
+        _v$11 = nextLabel();
       _v$7 !== _p$.e && _$setAttribute(_el$27, "aria-label", _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setProperty(_el$29, "disabled", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setAttribute(_el$29, "aria-label", _p$.a = _v$9);
-      _v$0 !== _p$.o && _$setProperty(_el$31, "disabled", _p$.o = _v$0);
-      _v$1 !== _p$.i && _$setAttribute(_el$31, "aria-label", _p$.i = _v$1);
+      _v$8 !== _p$.t && _$setAttribute(_el$29, "data-hidden", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setProperty(_el$29, "disabled", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$setAttribute(_el$29, "aria-label", _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setAttribute(_el$31, "data-hidden", _p$.i = _v$1);
+      _v$10 !== _p$.n && _$setProperty(_el$31, "disabled", _p$.n = _v$10);
+      _v$11 !== _p$.s && _$setAttribute(_el$31, "aria-label", _p$.s = _v$11);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined,
+      s: undefined
     });
     _$runHydrationEvents();
     return _el$27;
@@ -812,12 +827,12 @@ function DateStatusLine(props) {
     typeof _ref$4 === "function" ? _$use(_ref$4, _el$62) : props.ref = _el$62;
     _$insert(_el$62, () => props.text);
     _$effect(_p$ => {
-      var _v$25 = props.id,
-        _v$26 = props.tone,
-        _v$27 = typeof props.text === "string" && props.text ? props.text : undefined;
-      _v$25 !== _p$.e && _$setAttribute(_el$62, "id", _p$.e = _v$25);
-      _v$26 !== _p$.t && _$setAttribute(_el$62, "data-tone", _p$.t = _v$26);
-      _v$27 !== _p$.a && _$setAttribute(_el$62, "title", _p$.a = _v$27);
+      var _v$28 = props.id,
+        _v$29 = props.tone,
+        _v$30 = typeof props.text === "string" && props.text ? props.text : undefined;
+      _v$28 !== _p$.e && _$setAttribute(_el$62, "id", _p$.e = _v$28);
+      _v$29 !== _p$.t && _$setAttribute(_el$62, "data-tone", _p$.t = _v$29);
+      _v$30 !== _p$.a && _$setAttribute(_el$62, "title", _p$.a = _v$30);
       return _p$;
     }, {
       e: undefined,
@@ -1151,10 +1166,10 @@ function DateTextField(props) {
             input?.focus();
           };
           _$effect(_p$ => {
-            var _v$28 = text() ? undefined : "true",
-              _v$29 = uiMessages().clearDate;
-            _v$28 !== _p$.e && _$setAttribute(_el$68, "data-hidden", _p$.e = _v$28);
-            _v$29 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$29);
+            var _v$31 = text() ? undefined : "true",
+              _v$32 = uiMessages().clearDate;
+            _v$31 !== _p$.e && _$setAttribute(_el$68, "data-hidden", _p$.e = _v$31);
+            _v$32 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$32);
             return _p$;
           }, {
             e: undefined,
@@ -1180,14 +1195,14 @@ function DateTextField(props) {
           var _ref$7 = toggle;
           typeof _ref$7 === "function" ? _$use(_ref$7, _el$69) : toggle = _el$69;
           _$effect(_p$ => {
-            var _v$30 = props.owner.disabled,
-              _v$31 = calendar.open() ? t().closeCalendar : t().openCalendar,
-              _v$32 = calendar.open() || sheetOpen(),
-              _v$33 = sheetOpen() ? sheetId : popoverId;
-            _v$30 !== _p$.e && _$setProperty(_el$69, "disabled", _p$.e = _v$30);
-            _v$31 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$31);
-            _v$32 !== _p$.a && _$setAttribute(_el$69, "aria-expanded", _p$.a = _v$32);
-            _v$33 !== _p$.o && _$setAttribute(_el$69, "aria-controls", _p$.o = _v$33);
+            var _v$33 = props.owner.disabled,
+              _v$34 = calendar.open() ? t().closeCalendar : t().openCalendar,
+              _v$35 = calendar.open() || sheetOpen(),
+              _v$36 = sheetOpen() ? sheetId : popoverId;
+            _v$33 !== _p$.e && _$setProperty(_el$69, "disabled", _p$.e = _v$33);
+            _v$34 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$34);
+            _v$35 !== _p$.a && _$setAttribute(_el$69, "aria-expanded", _p$.a = _v$35);
+            _v$36 !== _p$.o && _$setAttribute(_el$69, "aria-controls", _p$.o = _v$36);
             return _p$;
           }, {
             e: undefined,
@@ -1267,14 +1282,14 @@ function DateTextField(props) {
         }
       }), _el$81, _co$17);
       _$effect(_p$ => {
-        var _v$34 = calendar.open() ? "true" : undefined,
-          _v$35 = props.owner.readOnly ? "true" : undefined,
-          _v$36 = invalid() ? "true" : undefined,
-          _v$37 = fieldName(props.owner) ?? uiMessages().datePicker;
-        _v$34 !== _p$.e && _$setAttribute(_el$64, "data-open", _p$.e = _v$34);
-        _v$35 !== _p$.t && _$setAttribute(_el$64, "data-readonly", _p$.t = _v$35);
-        _v$36 !== _p$.a && _$setAttribute(_el$65, "data-invalid", _p$.a = _v$36);
-        _v$37 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$37);
+        var _v$37 = calendar.open() ? "true" : undefined,
+          _v$38 = props.owner.readOnly ? "true" : undefined,
+          _v$39 = invalid() ? "true" : undefined,
+          _v$40 = fieldName(props.owner) ?? uiMessages().datePicker;
+        _v$37 !== _p$.e && _$setAttribute(_el$64, "data-open", _p$.e = _v$37);
+        _v$38 !== _p$.t && _$setAttribute(_el$64, "data-readonly", _p$.t = _v$38);
+        _v$39 !== _p$.a && _$setAttribute(_el$65, "data-invalid", _p$.a = _v$39);
+        _v$40 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$40);
         return _p$;
       }, {
         e: undefined,
@@ -1808,10 +1823,10 @@ function DateRangeTextField(props) {
             startInput?.focus();
           };
           _$effect(_p$ => {
-            var _v$38 = startText() || endText() ? undefined : "true",
-              _v$39 = uiMessages().clearDate;
-            _v$38 !== _p$.e && _$setAttribute(_el$103, "data-hidden", _p$.e = _v$38);
-            _v$39 !== _p$.t && _$setAttribute(_el$103, "aria-label", _p$.t = _v$39);
+            var _v$41 = startText() || endText() ? undefined : "true",
+              _v$42 = uiMessages().clearDate;
+            _v$41 !== _p$.e && _$setAttribute(_el$103, "data-hidden", _p$.e = _v$41);
+            _v$42 !== _p$.t && _$setAttribute(_el$103, "aria-label", _p$.t = _v$42);
             return _p$;
           }, {
             e: undefined,
@@ -1836,14 +1851,14 @@ function DateRangeTextField(props) {
           var _ref$10 = toggle;
           typeof _ref$10 === "function" ? _$use(_ref$10, _el$104) : toggle = _el$104;
           _$effect(_p$ => {
-            var _v$40 = props.owner.disabled,
-              _v$41 = calendar.open() ? t().closeCalendar : t().openCalendar,
-              _v$42 = calendar.open() || sheetOpen(),
-              _v$43 = sheetOpen() ? sheetId : popoverId;
-            _v$40 !== _p$.e && _$setProperty(_el$104, "disabled", _p$.e = _v$40);
-            _v$41 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$41);
-            _v$42 !== _p$.a && _$setAttribute(_el$104, "aria-expanded", _p$.a = _v$42);
-            _v$43 !== _p$.o && _$setAttribute(_el$104, "aria-controls", _p$.o = _v$43);
+            var _v$43 = props.owner.disabled,
+              _v$44 = calendar.open() ? t().closeCalendar : t().openCalendar,
+              _v$45 = calendar.open() || sheetOpen(),
+              _v$46 = sheetOpen() ? sheetId : popoverId;
+            _v$43 !== _p$.e && _$setProperty(_el$104, "disabled", _p$.e = _v$43);
+            _v$44 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$44);
+            _v$45 !== _p$.a && _$setAttribute(_el$104, "aria-expanded", _p$.a = _v$45);
+            _v$46 !== _p$.o && _$setAttribute(_el$104, "aria-controls", _p$.o = _v$46);
             return _p$;
           }, {
             e: undefined,
@@ -1893,18 +1908,18 @@ function DateRangeTextField(props) {
         }
       }), _el$111, _co$24);
       _$effect(_p$ => {
-        var _v$44 = calendar.open() ? "true" : undefined,
-          _v$45 = props.owner.readOnly ? "true" : undefined,
-          _v$46 = props.owner.label ? meta.labelId : undefined,
-          _v$47 = props.owner.label ? undefined : props.owner["aria-label"],
-          _v$48 = invalid() ? "true" : undefined,
-          _v$49 = name() ?? uiMessages().datePicker;
-        _v$44 !== _p$.e && _$setAttribute(_el$96, "data-open", _p$.e = _v$44);
-        _v$45 !== _p$.t && _$setAttribute(_el$96, "data-readonly", _p$.t = _v$45);
-        _v$46 !== _p$.a && _$setAttribute(_el$97, "aria-labelledby", _p$.a = _v$46);
-        _v$47 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$47);
-        _v$48 !== _p$.i && _$setAttribute(_el$97, "data-invalid", _p$.i = _v$48);
-        _v$49 !== _p$.n && _$setAttribute(_el$105, "aria-label", _p$.n = _v$49);
+        var _v$47 = calendar.open() ? "true" : undefined,
+          _v$48 = props.owner.readOnly ? "true" : undefined,
+          _v$49 = props.owner.label ? meta.labelId : undefined,
+          _v$50 = props.owner.label ? undefined : props.owner["aria-label"],
+          _v$51 = invalid() ? "true" : undefined,
+          _v$52 = name() ?? uiMessages().datePicker;
+        _v$47 !== _p$.e && _$setAttribute(_el$96, "data-open", _p$.e = _v$47);
+        _v$48 !== _p$.t && _$setAttribute(_el$96, "data-readonly", _p$.t = _v$48);
+        _v$49 !== _p$.a && _$setAttribute(_el$97, "aria-labelledby", _p$.a = _v$49);
+        _v$50 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$50);
+        _v$51 !== _p$.i && _$setAttribute(_el$97, "data-invalid", _p$.i = _v$51);
+        _v$52 !== _p$.n && _$setAttribute(_el$105, "aria-label", _p$.n = _v$52);
         return _p$;
       }, {
         e: undefined,
@@ -2017,7 +2032,7 @@ export function DateTimePicker(props) {
     }, dateConfig()), dateConfig()));
   };
   const canApply = () => Boolean(draftDate()) && (!withTime() || isCompleteTime(draftTime()));
-  const draftValue = () => withTime() ? toDateTimeValue(draftDate(), draftTime(), dateConfig()) : draftDate() || null;
+  const draftValue = () => withTime() ? draftDateTimeValue(valueHasTime() ? value() : null, draftDate(), draftTime(), dateConfig()) : draftDate() || null;
   const addTime = () => {
     setWithTime(true);
     queueMicrotask(() => timeField?.querySelector("input")?.focus());
@@ -2136,10 +2151,10 @@ export function DateTimePicker(props) {
                   var _el$125 = _$getNextElement(_tmpl$27);
                   _el$125.$$click = removeTime;
                   _$effect(_p$ => {
-                    var _v$50 = messages().removeTime,
-                      _v$51 = messages().removeTime;
-                    _v$50 !== _p$.e && _$setAttribute(_el$125, "aria-label", _p$.e = _v$50);
-                    _v$51 !== _p$.t && _$setAttribute(_el$125, "title", _p$.t = _v$51);
+                    var _v$53 = messages().removeTime,
+                      _v$54 = messages().removeTime;
+                    _v$53 !== _p$.e && _$setAttribute(_el$125, "aria-label", _p$.e = _v$53);
+                    _v$54 !== _p$.t && _$setAttribute(_el$125, "title", _p$.t = _v$54);
                     return _p$;
                   }, {
                     e: undefined,
@@ -2271,9 +2286,10 @@ export function DateRangePicker(props) {
       return;
     }
     if ((current.start || current.end) && (!isCompleteTime(startTime()) || !isCompleteTime(endTime()))) return;
+    const committed = resolveMaybeAccessor(props.value);
     const value = {
-      start: current.start ? toDateTimeValue(current.start, startTime(), dateConfig()) : null,
-      end: current.end ? toDateTimeValue(current.end, endTime(), dateConfig()) : null
+      start: current.start ? draftDateTimeValue(committed.start, current.start, startTime(), dateConfig()) : null,
+      end: current.end ? draftDateTimeValue(committed.end, current.end, endTime(), dateConfig()) : null
     };
     close();
     commitFieldValue(props, value);