@spaethtech/svelte-ui 0.21.1-dev.124.7b5c577 → 0.21.1-dev.126.3149ff9

package/CLAUDE.md

@@ -148,12 +148,27 @@ for just the library artifact.
 **IMPORTANT**: Drive the running demo site when working on UI components — verify behavior in a real
 browser, don't rely on `svelte-check` alone.
 
-Development server runs at `http://localhost:5173/` (`npm run dev`).
+**The dev stack is ALWAYS running — you never cold-build the demo.** A Docker container
+(`svelte-ui-demo-1`, `node:24`, cmd `npm run dev:linked`) runs the Vite dev server **continuously
+with HMR**, bind-mounting this repo (`/home/rspaeth/svelte-ui -> /svelte-ui`), so every edit you save
+here hot-reloads into the live site within seconds. So "verify in a browser" needs **no build and no
+memory** on your part — the compile already happened and stays warm. (This sandbox is small — ~1.9 GB
+RAM, 1 vCPU — so a *second*, cold `npm run dev`/`vite build` in here can OOM; that's why you use the
+already-running container, not a fresh build. `npm run package` is light and is fine to run.)
+
+Reach it without `localhost` publishing: the container exposes `5173` on the Docker network (not a
+host port). Get its IP with `docker inspect svelte-ui-demo-1 --format '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}'`
+(e.g. `http://172.18.0.2:5173/<route>`), or go through Caddy at `https://svelte-ui.spaethtech.dev`
+(`svelte-ui-caddy-1` proxies to it; `php-svelte.spaethtech.dev` → the host `:5173`). `curl` the route
+first to confirm it serves, then point a browser at it.
 
 Use the **`/playwright-cli`** workflow for browser-driven testing (navigation, snapshots/screenshots,
-console inspection, interaction). Point it at the dev server URL and the relevant component demo
-route (e.g. `/tabstrip`). The old Chrome DevTools MCP (`.mcp.json` + `chrome-devtools-mcp`) has been
-removed in favor of this.
+console inspection, interaction). Point it at the **container IP** `:5173` and the relevant demo route
+(e.g. `/tabstrip`). The old Chrome DevTools MCP (`.mcp.json` + `chrome-devtools-mcp`) has been removed
+in favor of this. **Browser-binary gotcha:** the Playwright in `node_modules` and the cached browser
+revision can mismatch (e.g. it wants `headless_shell-1181` but the cache has `chromium-1229`); pass
+`executablePath` to the installed `~/.cache/ms-playwright/chromium-*/chrome-linux64/chrome` instead of
+re-downloading.
 
 ### Demo pages (`src/routes/<component>/`)
 

package/MIGRATION.md

@@ -37,7 +37,7 @@ FieldChrome + bordered field box + chevron). Differences:
 | --- | --- |
 | `options`, `value`, `placeholder`, `disabled`, `size`, `variant`, `borderless`, `name`, `class`, `label`, `aside`, `error`, `description`, `required`, `onSelection` | ✅ Honoured (identical semantics). `name` now sits on the `<select>` itself — it submits natively, so no hidden input. |
 | `inputClass` | ✅ Applied to the `<select>` (alias of the new `selectClass`). |
-| `multiSelect` | ⚠️ Maps to native `<select multiple>` — a **listbox**, not the dropdown trigger. Single-select is the pixel-perfect path; the multi appearance intentionally diverges. |
+| `multiSelect` | ⚠️ Maps to native `<select multiple>` — a **listbox**, not the dropdown trigger. Renders as a usable multi-row listbox (bounded height, no chevron); single-select is the pixel-perfect path, the multi appearance intentionally diverges. **Submit shape differs:** `Select` multi submits ONE comma-joined field (`tags=red,blue`); `Select2` multi submits the native repeated-field encoding, so a server collects it as an array — in PHP name the field `tags[]` (a bare `tags` keeps only the last). A PHP action therefore changes when you swap a multi `Select` → `Select2`. |
 | `itemSnippet`, `itemClass`, `dropdownClass` | ❌ **Accepted but ignored** — the open list is the OS dropdown and can't be styled/custom-rendered. |
 | `maxVisibleItems`, `itemHeight`, `autoAdvance` | ❌ Accepted but ignored — the OS controls the dropdown. |
 | `url`, `searchParam`, `transform`, `debounceMs`, `maxResults`, `headers`, `searchTerm`, `onError`, `onLoadStart`, `onLoadEnd` | ❌ Accepted but ignored — **no remote search** (a native `<select>` has no type-to-search box). Load options yourself and pass `options`. |
@@ -98,7 +98,7 @@ 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). |
+| `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). Survives `form.reset()` / SvelteKit `use:enhance` (`reset: true`): the input's `defaultValue` tracks the bound value, so a reset restores the date instead of blanking it. |
 | `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. |

package/dist/components/Calendar.svelte

@@ -10,7 +10,7 @@
  */
 -->
 <script lang="ts">
-  import { uiI18n } from "../i18n.js";
+  import { uiI18n, safeLocale } from "../i18n.js";
   const i18n = uiI18n();
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
@@ -45,7 +45,7 @@
     min,
     max,
     weekStart,
-    locale = i18n.locale ?? (typeof navigator !== "undefined" ? navigator.language : "en-US"),
+    locale = safeLocale(i18n.locale),
     size = "md",
     variant = "primary",
     class: cls = "",

package/dist/components/DatePicker.svelte

@@ -13,7 +13,7 @@
  */
 -->
 <script lang="ts">
-  import { uiI18n } from "../i18n.js";
+  import { uiI18n, safeLocale } from "../i18n.js";
   const i18n = uiI18n();
   import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
@@ -60,7 +60,7 @@
     min,
     max,
     weekStart,
-    locale = i18n.locale ?? (typeof navigator !== "undefined" ? navigator.language : "en-US"),
+    locale = safeLocale(i18n.locale),
     placeholder = range ? "Select dates" : time ? "Select date & time" : "Select date",
     disabled = false,
     size = "md",

package/dist/components/DatePicker2.svelte

@@ -88,9 +88,14 @@
   }
 </script>
 
+<!-- `defaultValue` tracks the bound value so `form.reset()` / SvelteKit `use:enhance` (reset:true)
+     restores it instead of blanking the native <input>: Svelte binds `value` as a property only, so
+     without a matching reset-default a reset wipes the date (and the next native submit posts ""). See
+     MIGRATION.md / CHANGELOG. -->
 <Input
   type={time ? "datetime-local" : "date"}
   value={strValue}
+  defaultValue={strValue}
   oninput={(e) => onInput((e.currentTarget as HTMLInputElement).value)}
   {min}
   {max}

package/dist/components/Select2.svelte

@@ -183,15 +183,20 @@
   const padRightClass = $derived(responsiveClasses(size, padRightMap));
 
   // Field box — mirrors Input.wrapperClasses (icon on the right → pl-2 pr-0 on the frame).
+  // `multiSelect` is a native <select multiple> LISTBOX, not a dropdown trigger: it can't live in the
+  // fixed single-line height without clipping, so the box grows to the listbox (items-stretch, auto
+  // height, symmetric padding) and the chevron is dropped. Single-select stays pixel-identical.
   const wrapperClasses = $derived.by(() => {
-    const base = `relative w-full ${heightClass} flex items-center [border-radius:var(--ui-border-radius)]`;
+    const base = multiSelect
+      ? `relative w-full flex items-stretch [border-radius:var(--ui-border-radius)]`
+      : `relative w-full ${heightClass} flex items-center [border-radius:var(--ui-border-radius)]`;
     const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
     const fieldBg =
       variant === "ghost" ? "bg-transparent" : "[background-color:var(--ui-color-background)]";
     const themeStyles = [
       fieldBg,
       "border",
-      "pl-2 pr-0",
+      multiSelect ? "p-1" : "pl-2 pr-0",
       frameStyles,
       "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
       "focus-within:[outline-offset:0px]",
@@ -206,8 +211,12 @@
   });
 
   // The <select> itself — mirrors Input's inner <input> (flex-1, transparent, no border/outline).
+  // Multi mode keeps the native listbox chrome: full width, native row layout (no appearance-none,
+  // no single-line height, no chevron right-padding).
   const selectClasses = $derived.by(() => {
-    const base = `flex-1 h-full bg-transparent border-none outline-none ${textClass} ${padRightClass} leading-tight p-0 min-w-0 appearance-none cursor-pointer`;
+    const base = multiSelect
+      ? `w-full bg-transparent border-none outline-none ${textClass} min-w-0 cursor-pointer`
+      : `flex-1 h-full bg-transparent border-none outline-none ${textClass} ${padRightClass} leading-tight p-0 min-w-0 appearance-none cursor-pointer`;
     const color = hasValue ? "[color:var(--ui-color-text)]" : placeholderVariantColor[variant];
     const disabledColor =
       "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)] disabled:cursor-not-allowed disabled:bg-transparent";
@@ -234,6 +243,7 @@
            before hydration / with JS off — and `onchange` keeps client state in sync. -->
       <select
         multiple={multiSelect}
+        size={multiSelect ? Math.max(2, Math.min(options.length, 6)) : undefined}
         {name}
         {disabled}
         {required}
@@ -260,16 +270,19 @@
       </select>
 
       <!-- Decorative chevron — same box/colour/size as Input's right icon. pointer-events-none so a
-           click anywhere (incl. here) falls through to the <select> beneath. -->
-      <span
-        class="pointer-events-none absolute inset-y-0 right-0 {iconBoxClass} flex items-center justify-center select-none"
-      >
+           click anywhere (incl. here) falls through to the <select> beneath. Dropdown affordance only:
+           a multi listbox has no dropdown, so it's hidden there. -->
+      {#if !multiSelect}
         <span
-          class="inline-flex {svgClass} items-center justify-center [color:var(--ui-color-secondary)] [&_svg]:w-full [&_svg]:h-full"
+          class="pointer-events-none absolute inset-y-0 right-0 {iconBoxClass} flex items-center justify-center select-none"
         >
-          <ChevronDown />
+          <span
+            class="inline-flex {svgClass} items-center justify-center [color:var(--ui-color-secondary)] [&_svg]:w-full [&_svg]:h-full"
+          >
+            <ChevronDown />
+          </span>
         </span>
-      </span>
+      {/if}
     </div>
   {/snippet}
 </FieldChrome>

package/dist/components/TimePicker.svelte

@@ -17,6 +17,7 @@
   import Input from "./Input.svelte";
   import Popup from "./Popup.svelte";
   import TimeSpinner from "./TimeSpinner.svelte";
+  import { safeLocale } from "../i18n.js";
   import IconClock from "~icons/mdi/clock-outline";
 
   interface Props extends Omit<HTMLInputAttributes, "value" | "size" | "min" | "max" | "step"> {
@@ -47,7 +48,7 @@
     min = "00:00",
     max = "23:59",
     meridiem = true,
-    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    locale = safeLocale(),
     size = "md",
     variant = "primary",
     disabled = false,

package/dist/components/TimeRangeInput.svelte

@@ -9,7 +9,7 @@
  */
 -->
 <script lang="ts">
-  import { uiI18n } from "../i18n.js";
+  import { uiI18n, safeLocale } from "../i18n.js";
   const i18n = uiI18n();
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { FieldChromeProps } from "./field-chrome.js";
@@ -51,7 +51,7 @@
     min = "00:00",
     max = "23:59",
     meridiem = true,
-    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    locale = safeLocale(),
     size = "md",
     variant = "primary",
     disabled = false,

package/dist/components/TimeSpinner.svelte

@@ -14,6 +14,7 @@
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import { variantToken, type Variant } from "../types/variants.js";
   import { resolveStep, type StepSpec } from "../types/time.js";
+  import { safeLocale } from "../i18n.js";
   import IconUp from "~icons/mdi/chevron-up";
   import IconDown from "~icons/mdi/chevron-down";
 
@@ -44,7 +45,7 @@
     min,
     max,
     meridiem = true,
-    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    locale = safeLocale(),
     size = "md",
     variant = "primary",
     class: cls = "",

package/dist/i18n.d.ts

@@ -71,6 +71,16 @@ export type UiMessages = {
 };
 /** English defaults — the exact literals the components used to hard-code (no behaviour change). */
 export declare const defaultUiMessages: UiMessages;
+/**
+ * Resolve a valid BCP-47 locale tag for `Intl.*`. A raw `navigator.language` is NOT guaranteed to be a
+ * valid BCP-47 tag — on a POSIX/`LANG=C` host the browser can report `en-US@posix`, and handing that
+ * straight to `Intl.Locale`/`Intl.DateTimeFormat` throws `RangeError: Invalid language tag`, which (in a
+ * component's reactive scope) kills hydration. This validates the preferred tag, then
+ * `navigator.language`, falling back to each candidate's primary subtag (e.g. `en-US@posix` → `en`) and
+ * finally `"en-US"`. A tag that is already valid is returned unchanged, so formatted output is
+ * byte-identical for every well-formed locale.
+ */
+export declare function safeLocale(preferred?: string): string;
 /** What a component reads. `locale` is `undefined` unless a provider sets one — Intl components then
  *  fall back to `navigator.language`, preserving current behaviour for no-op consumers. */
 export type UiI18n = {

package/dist/i18n.js

@@ -61,6 +61,36 @@ export const defaultUiMessages = {
     selectTheme: "Select theme...",
     menu: "Menu",
 };
+/**
+ * Resolve a valid BCP-47 locale tag for `Intl.*`. A raw `navigator.language` is NOT guaranteed to be a
+ * valid BCP-47 tag — on a POSIX/`LANG=C` host the browser can report `en-US@posix`, and handing that
+ * straight to `Intl.Locale`/`Intl.DateTimeFormat` throws `RangeError: Invalid language tag`, which (in a
+ * component's reactive scope) kills hydration. This validates the preferred tag, then
+ * `navigator.language`, falling back to each candidate's primary subtag (e.g. `en-US@posix` → `en`) and
+ * finally `"en-US"`. A tag that is already valid is returned unchanged, so formatted output is
+ * byte-identical for every well-formed locale.
+ */
+export function safeLocale(preferred) {
+    const isValid = (tag) => {
+        try {
+            return Intl.getCanonicalLocales(tag).length > 0;
+        }
+        catch {
+            return false;
+        }
+    };
+    const candidates = [preferred, typeof navigator !== "undefined" ? navigator.language : undefined];
+    for (const c of candidates) {
+        if (!c)
+            continue;
+        if (isValid(c))
+            return c;
+        const primary = c.split(/[-_@.]/)[0]; // strip region/extension/POSIX modifier/charset
+        if (primary && isValid(primary))
+            return primary;
+    }
+    return "en-US";
+}
 const KEY = Symbol("svelte-ui-i18n");
 const resolve = (v) => typeof v === "function" ? v() : v;
 /**

package/dist/index.d.ts

@@ -86,7 +86,7 @@ export { anchored, computePlacement, resolveBoundary } from "./positioning/ancho
 export type { Side, Align, Boundary, PlaceOptions, Placement, AnchoredParams, } from "./positioning/anchored.js";
 export { tooltip } from "./positioning/tooltip.js";
 export type { TooltipOptions } from "./positioning/tooltip.js";
-export { setUiI18n, uiI18n, defaultUiMessages } from "./i18n.js";
+export { setUiI18n, uiI18n, defaultUiMessages, safeLocale } from "./i18n.js";
 export type { UiMessages, UiI18n } from "./i18n.js";
 export type { Variant } from "./types/variants.js";
 export type { Size } from "./types/sizes.js";

package/dist/index.js

@@ -85,6 +85,6 @@ export { anchored, computePlacement, resolveBoundary } from "./positioning/ancho
 // Tooltip action (use:tooltip) — themed tooltips on the `anchored` engine, no global handler.
 export { tooltip } from "./positioning/tooltip.js";
 // Internal localization (opt-in) — override svelte-ui's own microcopy + Intl locale at the app root.
-export { setUiI18n, uiI18n, defaultUiMessages } from "./i18n.js";
+export { setUiI18n, uiI18n, defaultUiMessages, safeLocale } from "./i18n.js";
 export { BREAKPOINT_PX } from "./types/breakpoints.js";
 export { responsiveClasses, resolveScalar } from "./types/responsive.js";

package/docs/components.md

@@ -106,7 +106,10 @@ shows the right option in SSR / before hydration. The **closed control is pixel-
 - **Intentional divergences** (native `<select>` limits): the open list is the OS dropdown (no
   `itemSnippet`/`itemClass`/`dropdownClass`), **no remote search** (`url`/`searchParam`/`transform`/…
   are accepted but ignored — load `options` yourself), no `methods.openDropdown()`, and `multiSelect`
-  maps to a native `<select multiple>` listbox. Full matrix + codemod: `MIGRATION.md`.
+  maps to a native `<select multiple>` listbox (a usable multi-row box, not the dropdown trigger). Note
+  the multi **submit shape** differs from `Select`: `Select` multi posts one comma-joined field, while
+  `Select2` multi posts the native repeated-field encoding — collect it as an array (in PHP, name the
+  field `tags[]`). Full matrix + codemod: `MIGRATION.md`.
 - **Use when**: a static choice must render/submit server-side without JS. Stay on `Select` for
   remote search, custom option rendering, or the multi-select trigger look.
 - **Transitional**: ships alongside `Select` under the `2` suffix; see `MIGRATION.md` for the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.124.7b5c577",
+  "version": "0.21.1-dev.126.3149ff9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"