@spaethtech/svelte-ui 0.21.1-dev.121.3e3f7cf → 0.21.1-dev.124.7b5c577

package/MIGRATION.md

@@ -87,3 +87,23 @@ grep -rl 'Disclosure\|Accordion' src | xargs sed -i \
   -e 's/\b\(Disclosure\|Accordion\)\b/\12/g'
 # Review: this also rewrites import specifiers and any prose; check each hit.
 ```
+
+### `DatePicker2` vs `DatePicker`
+
+`DatePicker2` reuses `Input` with a real `<input type="date">` / `datetime-local`. **Unlike the other
+`*2` components, the trigger content is NOT a pixel match** — the native control shows editable date
+segments + the browser's picker indicator, not `DatePicker`'s formatted label + MDI calendar. The
+field *frame* is identical (same `Input`), and the value format is identical, so the binding is
+drop-in for single/datetime.
+
+| `DatePicker` prop | `DatePicker2` behaviour |
+| --- | --- |
+| `value` (single `YYYY-MM-DD`, datetime `YYYY-MM-DDTHH:MM`), `time`, `min`, `max`, `size`, `variant`, `disabled`, `name`, `class` | ✅ Honoured. `name` sits on the `<input>` (submits natively — no hidden input). |
+| `range` | ❌ **No native equivalent.** Falls back to a single date input (dev warning). Use two `DatePicker2`s (start/end) or stay on `DatePicker`. |
+| `step`, `seconds`, `meridiem`, `weekStart` | ❌ Accepted but ignored — the OS picker owns time granularity + week layout. |
+| `locale` | ❌ Ignored — the native input formats per the user's browser/OS locale. |
+| `placeholder` | ❌ Ignored — native date inputs don't show placeholder text. |
+| formatted label (e.g. "Mar 5, 2026") | ⚠️ Shown as native editable segments (e.g. `03/05/2026`) instead. |
+
+**When NOT to swap:** range mode, a custom formatted trigger, or a specific locale/time-granularity
+UI — stay on `DatePicker`. Swap for plain single-date / datetime fields that must work without JS.

package/dist/components/DatePicker2.svelte

@@ -0,0 +1,103 @@
+<!--
+/**
+ * DatePicker2 — a native-first, no-JS/SSR-correct sibling of `DatePicker` (transitional `*2`, see
+ * MIGRATION.md). It reuses `Input` with a real `<input type="date">` (or `type="datetime-local">` in
+ * `time` mode), so date entry works with NO JavaScript, pops the browser's native date picker, and
+ * submits in a plain `<form>` via `name` — and the field FRAME (border/height/radius/focus) is
+ * pixel-identical to `DatePicker` because it is the same `Input`.
+ *
+ * HONEST caveat (unlike the other `*2` components): the native control renders its value as editable
+ * segments (e.g. `03/05/2025`) with the browser's own picker indicator, so the trigger *content* is
+ * NOT pixel-identical to `DatePicker`'s formatted label ("Mar 5, 2025") + MDI calendar. Only the
+ * frame matches. Value format for single/datetime is identical, so the binding is drop-in.
+ *
+ * Scope: single date + `time` (datetime). `range` has no native equivalent — if set, it falls back
+ * to a single date input (dev warning). `step`/`seconds`/`meridiem`/`weekStart`/`locale`/`placeholder`
+ * are accepted for drop-in compatibility but not honoured (the OS owns the native picker). See
+ * MIGRATION.md.
+ */
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+  import type { StepSpec } from "../types/time.js";
+  import Input from "./Input.svelte";
+  import { DEV } from "esm-env";
+
+  type RangeValue = { start: string | null; end: string | null };
+
+  let {
+    value = $bindable(),
+    range = false,
+    time = false,
+    min,
+    max,
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    name,
+    class: cls = "",
+    // ── Accepted for DatePicker compatibility, but the native picker owns these (ignored). ──
+    step: _step,
+    seconds: _seconds,
+    meridiem: _meridiem,
+    weekStart: _weekStart,
+    locale: _locale,
+    placeholder: _placeholder,
+    ...rest
+  }: {
+    /** `YYYY-MM-DD` (single) or `YYYY-MM-DDTHH:MM` (`time`). Drop-in with DatePicker's single/datetime. */
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    /** Native form field name — the `<input>` carries it; submits with no JS. */
+    name?: string;
+    class?: string;
+    // accepted-but-ignored
+    step?: StepSpec;
+    seconds?: boolean;
+    meridiem?: boolean;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+  } & Omit<
+    HTMLInputAttributes,
+    "type" | "value" | "size" | "min" | "max" | "name" | "class" | "disabled"
+  > = $props();
+
+  $effect(() => {
+    if (DEV && range) {
+      console.warn(
+        "DatePicker2: `range` has no native equivalent — falling back to a single date input. " +
+          "Use two DatePicker2s (start/end) or stay on DatePicker for range. See MIGRATION.md.",
+      );
+    }
+  });
+
+  // The native control only takes a string. Coerce away a RangeValue (range isn't supported here).
+  const strValue = $derived(typeof value === "string" ? value : "");
+  function onInput(v: string) {
+    value = v;
+  }
+</script>
+
+<Input
+  type={time ? "datetime-local" : "date"}
+  value={strValue}
+  oninput={(e) => onInput((e.currentTarget as HTMLInputElement).value)}
+  {min}
+  {max}
+  {name}
+  {disabled}
+  {size}
+  {variant}
+  class={cls}
+  {...rest}
+/>

package/dist/components/DatePicker2.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+import type { StepSpec } from "../types/time.js";
+type RangeValue = {
+    start: string | null;
+    end: string | null;
+};
+type $$ComponentProps = {
+    /** `YYYY-MM-DD` (single) or `YYYY-MM-DDTHH:MM` (`time`). Drop-in with DatePicker's single/datetime. */
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    /** Native form field name — the `<input>` carries it; submits with no JS. */
+    name?: string;
+    class?: string;
+    step?: StepSpec;
+    seconds?: boolean;
+    meridiem?: boolean;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+} & Omit<HTMLInputAttributes, "type" | "value" | "size" | "min" | "max" | "name" | "class" | "disabled">;
+declare const DatePicker2: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker2 = ReturnType<typeof DatePicker2>;
+export default DatePicker2;

package/dist/index.d.ts

@@ -72,6 +72,7 @@ export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as Disclosure2 } from "./components/Disclosure2.svelte";
 export { default as Accordion2 } from "./components/Accordion2.svelte";
+export { default as DatePicker2 } from "./components/DatePicker2.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, SideBarMenuActiveRule, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as Accordion } from "./components/Accordion.svelte";
 // Native-first, no-JS/SSR-correct variants (transitional `*2` — see MIGRATION.md).
 export { default as Disclosure2 } from "./components/Disclosure2.svelte";
 export { default as Accordion2 } from "./components/Accordion2.svelte";
+export { default as DatePicker2 } from "./components/DatePicker2.svelte";
 // Navigation Components
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";

package/docs/components.md

@@ -415,6 +415,23 @@ snaps to canonical on blur.
   inject `parse`/`format`/`validate` backed by a phone library (e.g. `libphonenumber-js`); the
   component bundles none.
 
+### DatePicker2 (native-first)
+
+**No-JS / SSR-correct** date entry: reuses `Input` with a real `<input type="date">` (or
+`datetime-local` in `time` mode), so it works without JavaScript, pops the browser's native picker,
+and submits via `name`. The field **frame** is pixel-identical to `DatePicker` (same `Input`).
+
+- **Location**: `src/lib/components/DatePicker2.svelte`
+- **Props**: drop-in superset of `DatePicker`'s single/datetime use — `value` (`YYYY-MM-DD` or
+  `YYYY-MM-DDTHH:MM`, identical format), `time`, `min`, `max`, `size`, `variant`, `disabled`, `name`,
+  `class`.
+- **Caveat (unlike the other `*2`)**: the native control renders its value as **editable segments**
+  with the browser's picker indicator, so the trigger *content* is not a pixel match for
+  `DatePicker`'s formatted label — only the frame is. `range` has **no native equivalent** (falls
+  back to a single input with a dev warning); `step`/`seconds`/`meridiem`/`weekStart`/`locale`/
+  `placeholder` are accepted but ignored (the OS owns the picker). See `MIGRATION.md`.
+- **Transitional**: ships alongside `DatePicker` under the `2` suffix.
+
 ## Navigation
 
 ### Breadcrumbs

package/docs/native-first-overlays.md

@@ -0,0 +1,54 @@
+# Native-first overlays — design note (Popup2 / Menu2 / Dialog2)
+
+Status: **parked for a decision** (2026-10-24). The field-shaped native-first `*2` variants
+(`Select2`, `Disclosure2`/`Accordion2`, `DatePicker2`) shipped; the **overlays** need a call on a
+cross-browser tradeoff before they're worth building, because unlike the others they can't be made
+both pixel-perfect *and* robustly no-JS today.
+
+## Why the overlays are different
+
+The shipped `*2` components lean on native elements that are **Baseline** and fully
+self-positioning: `<select>`, `<details>`, `<input type=date>`. They need no placement logic — the
+browser lays them out. `Popup`/`Menu`/`Dialog` are **anchored, top-layer overlays**: their whole job
+is to appear *next to a trigger*, flipping/ shifting against the viewport. Today's `Popup` does both
+halves in **JavaScript** — the Popover API for the top layer, and our `anchored` action for placement.
+
+A no-JS rebuild would need:
+
+1. **Toggle + top layer, no JS** — the **`popover` attribute** + a `popovertarget` button. This is
+   Baseline (2024): a `<button popovertarget="x">` opens/closes `<div popover id="x">` with
+   light-dismiss and top-layer, zero script. ✅ Solid.
+2. **Placement next to the trigger, no JS** — **CSS anchor positioning** (`anchor-name` /
+   `position-anchor` / `position-area` / `position-try`). This is where it breaks down: Chromium has
+   it, Safari shipped it recently, **Firefox is still partial/flagged**. Without it, a `popover` opens
+   but lands in its default (centered) position — not under the button.
+
+So a no-JS `Menu2` would toggle correctly everywhere but be **mispositioned in browsers lacking anchor
+positioning** — the opposite of the "pixel-perfect" goal.
+
+## Options
+
+- **A — Progressive enhancement (recommended).** Ship `Menu2`/`Popup2` with `popover` +
+  `popovertarget` for the no-JS toggle, CSS anchor positioning for placement where supported, and a
+  sane `position-area` fallback. When JS is present (hydrated), optionally enhance with the existing
+  `anchored` engine for perfect placement everywhere. Honest caveat: no-JS placement is
+  Chromium/Safari-first until Firefox catches up. Best if php-svelte's target browsers are
+  Chromium/Safari.
+- **B — Wait.** Hold the overlays until CSS anchor positioning is Baseline across the board, then the
+  no-JS story is clean everywhere. The field-shaped `*2` components already cover the common SSR form
+  needs (selects, disclosures, dates); menus/dialogs on a no-JS page are rarer.
+- **C — Dialog-only now.** `Dialog2` as a `<dialog popover>` / `popover` panel is *centered* by
+  nature (a modal doesn't anchor to a trigger), so it dodges the anchor-positioning gap. A no-JS
+  "open this dialog" via `popovertarget` works cross-browser today; the modal **backdrop + focus
+  trap** still want `showModal()` (JS) for full fidelity, but a `popover` dialog is a reasonable no-JS
+  approximation. Menu/Popup stay parked.
+
+## Recommendation
+
+Decide between **A** (build now, Chromium/Safari-first no-JS placement, documented) and **C** (do
+`Dialog2` now since it sidesteps anchoring, park `Menu2`/`Popup2` for **B**). Either way, `Menu2`
+should be built on a `Popup2` primitive the same way `Menu` is built on `Popup`, and both reuse the
+existing surface/panel classes so the open overlay stays pixel-identical to today's.
+
+The key input needed: **which browsers must php-svelte support with JS disabled?** If it's
+Chromium/Safari, go **A**. If Firefox-no-JS matters, go **B**/**C**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.121.3e3f7cf",
+  "version": "0.21.1-dev.124.7b5c577",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -205,6 +205,10 @@
       "types": "./dist/components/DatePicker.svelte.d.ts",
       "svelte": "./dist/components/DatePicker.svelte"
     },
+    "./date-picker2": {
+      "types": "./dist/components/DatePicker2.svelte.d.ts",
+      "svelte": "./dist/components/DatePicker2.svelte"
+    },
     "./time-spinner": {
       "types": "./dist/components/TimeSpinner.svelte.d.ts",
       "svelte": "./dist/components/TimeSpinner.svelte"