@spaethtech/svelte-ui 0.7.1-dev.39.d6b0fa5 → 0.7.1-dev.41.d01009c

package/.claude/skills/svelte-ui/SKILL.md

@@ -154,7 +154,9 @@ examples):
 
 - **Form:** `Button` `ButtonDropdown` `Input` `Select` `List` `TextArea` `Checkbox` `Toggle` `Radio`
   `Rating` · **`FieldGroup`** (fieldset wrapper for radio/checkbox/toggle sets)
-- **Specialized inputs:** `PasswordInput` `EmailInput` `SearchInput` `NumberInput`
+- **Specialized inputs:** `PasswordInput` `EmailInput` `SearchInput` `NumberInput` (formatting +
+  `percent`/`stepper`/`clamp`/`liveFormat`) `PhoneInput` (stores E.164; dep-free, inject
+  `parse`/`format` for per-country)
 - **Date / time:** `DatePicker` `Calendar` `TimePicker` `TimeSpinner` `TimeRangeInput` `DateTimeInput`
 - **Data:** `DataTable` `Query` — driven by the headless layer at **`@spaethtech/svelte-ui/data`**
   (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`).

package/.claude/skills/themes/SKILL.md

@@ -67,6 +67,8 @@ variant token at shared strengths, so every tinted surface is calculated identic
 
 ```
 --ui-tint-soft         12%   soft resting fill        (Badge fill, Alert `filled`)
+--ui-tint-divider      30%   soft internal divider    (CardHeader/CardFooter separators; the default
+                                                        secondary divider is `--ui-border-color`)
 --ui-tint-border       50%   bordered surface, REST   (Badge/Alert/Banner ring · Card/DataTable/Input/
                                                         TextArea frame · Button outline)
 --ui-tint-border-hover 80%   bordered field, HOVER    (Input/TextArea/Card/DataTable/Button — the
@@ -78,6 +80,8 @@ e.g. `color-mix(in srgb, var(<variant-token>) var(--ui-tint-soft), transparent)`
 primary@these; a `neutral` one is text@these. Theme-independent (a theme MAY override them to tune the
 whole tint language). **Every bordered surface uses ONE calc** — `--ui-tint-border` at rest,
 `--ui-tint-border-hover` on hover/focus, from the variant token — with **no `secondary` special case**.
+Internal **dividers** (Card header/footer separators) use the softer `--ui-tint-divider` (30%) tier,
+likewise one calc per variant — so a divider always reads lighter than the frame at any variant.
 `--ui-border-color-strong`/`-strong-hover` have been **REMOVED** (migrate any consumer use to
 `color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)`, hover →
 `--ui-tint-border-hover`). (Distinct from the interactive tints above, which mix from `--ui-accent`.)

package/dist/components/CardFooter.svelte

@@ -36,11 +36,10 @@
   const sepGap: Record<Size, string> = { sm: "mt-2", md: "mt-3", lg: "mt-4" };
   // The separator is a SOFT internal divider, consistent with the other section splits/footers in the
   // library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
-  // Default (secondary) → the shared `--ui-border-color`; any other variant → that accent's tint.
+  // One calc for EVERY variant: the variant's token mixed at `--ui-tint-divider` (30%), not the 50%
+  // frame strength. `secondary` resolves identically to the shared `--ui-border-color`.
   const sepColor = $derived(
-    variant === "secondary"
-      ? "var(--ui-border-color)"
-      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+    `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-divider), transparent)`,
   );
 </script>
 

package/dist/components/CardHeader.svelte

@@ -36,11 +36,10 @@
   const sepGap: Record<Size, string> = { sm: "mb-2", md: "mb-3", lg: "mb-4" };
   // The separator is a SOFT internal divider, consistent with the other section splits/footers in the
   // library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
-  // Default (secondary) → the shared `--ui-border-color`; any other variant → that accent's tint.
+  // One calc for EVERY variant: the variant's token mixed at `--ui-tint-divider` (30%), not the 50%
+  // frame strength. `secondary` resolves identically to the shared `--ui-border-color`.
   const sepColor = $derived(
-    variant === "secondary"
-      ? "var(--ui-border-color)"
-      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+    `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-divider), transparent)`,
   );
 </script>
 

package/dist/components/PhoneInput.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import Input from "./Input.svelte";
+  import Phone from "~icons/mdi/phone-outline";
+  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";
+
+  /**
+   * PhoneInput — type a phone number in ANY format; the bound `value` is stored in **E.164**
+   * (`+15551234567`): a leading `+`, country calling code, then the national number, digits only.
+   * The field shows what you type while editing and snaps to canonical E.164 on blur.
+   *
+   * **Dependency-free** by design — it normalises the E.164 *shape* only and does NOT do per-country
+   * formatting/validation (that needs a phone library + country data, which we don't bundle). To add
+   * that, inject `parse` / `format` / `validate` (e.g. backed by `libphonenumber-js`) — the component
+   * stays dep-free; you choose the library.
+   */
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    /** Bound value in E.164 (`+15551234567`), normalised from whatever the user types. */
+    value: string;
+    class?: string;
+    inputClass?: string;
+    /** Validates the normalised E.164 value. Overrides the built-in E.164-shape check. */
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
+    required?: boolean;
+    /** Calling code (digits, no `+`) prepended when the typed number has no leading `+`. Default `"1"`
+     *  (North America). Set to the calling code of the numbers your users enter without a `+`. */
+    defaultCallingCode?: string;
+    /** Normalise typed text → stored E.164. Override to plug a library (e.g. libphonenumber-js). */
+    parse?: (input: string, defaultCallingCode: string) => string;
+    /** Format the stored E.164 → field display (default: shown as-is). Override for a national /
+     *  pretty format from your phone library. */
+    format?: (value: string) => string;
+  }
+
+  let {
+    value = $bindable(""),
+    valid = $bindable(true),
+    touched = $bindable(false),
+    element = $bindable(),
+    validate,
+    required = false,
+    defaultCallingCode = "1",
+    parse,
+    format,
+    placeholder = "(555) 123-4567",
+    ...restProps
+  }: Props = $props();
+
+  let displayValue = $state("");
+  let focused = $state(false);
+
+  // Default normalisation: an explicit international `+…` is kept (digits only after the `+`);
+  // otherwise the default calling code is prepended. SHAPE only — no per-country length check.
+  function defaultParse(raw: string, dcc: string): string {
+    const trimmed = (raw ?? "").trim();
+    if (!trimmed) return "";
+    const digits = trimmed.replace(/\D/g, "");
+    if (!digits) return "";
+    return trimmed.includes("+") ? `+${digits}` : `+${dcc}${digits}`;
+  }
+
+  const toE164 = (raw: string) => (parse ?? defaultParse)(raw, defaultCallingCode);
+  const toDisplay = (v: string) => (v ? (format ? format(v) : v) : "");
+
+  // Reflect external value changes into the field while the user isn't editing.
+  $effect(() => {
+    if (!focused) displayValue = toDisplay(value);
+  });
+
+  const defaultValidator = (v: string) => {
+    if (!v) return required ? "Phone number is required" : true;
+    // E.164 shape: `+`, a non-zero country digit, then 6–14 more digits (7–15 total).
+    if (!/^\+[1-9]\d{6,14}$/.test(v)) return "Enter a valid phone number";
+    return true;
+  };
+  const phoneValidator = $derived(validate ?? defaultValidator);
+
+  function handleInput(raw: string) {
+    displayValue = raw;
+    value = toE164(raw);
+  }
+  function handleFocus() {
+    focused = true;
+    displayValue = toDisplay(value);
+  }
+  function handleBlur() {
+    focused = false;
+    displayValue = toDisplay(value); // snap the field to the canonical (or your `format`) form
+  }
+
+  let stringValue = $derived(displayValue);
+</script>
+
+<Input
+  bind:value={stringValue}
+  bind:valid
+  bind:touched
+  bind:element
+  type="tel"
+  inputmode="tel"
+  autocomplete="tel"
+  {required}
+  validate={(val) => phoneValidator(toE164(val))}
+  oninput={(e) => handleInput((e.target as HTMLInputElement).value)}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  {placeholder}
+  {...restProps}
+>
+  {#snippet icon()}<Phone />{/snippet}
+</Input>

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

@@ -0,0 +1,41 @@
+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";
+/**
+ * PhoneInput — type a phone number in ANY format; the bound `value` is stored in **E.164**
+ * (`+15551234567`): a leading `+`, country calling code, then the national number, digits only.
+ * The field shows what you type while editing and snaps to canonical E.164 on blur.
+ *
+ * **Dependency-free** by design — it normalises the E.164 *shape* only and does NOT do per-country
+ * formatting/validation (that needs a phone library + country data, which we don't bundle). To add
+ * that, inject `parse` / `format` / `validate` (e.g. backed by `libphonenumber-js`) — the component
+ * stays dep-free; you choose the library.
+ */
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    /** Bound value in E.164 (`+15551234567`), normalised from whatever the user types. */
+    value: string;
+    class?: string;
+    inputClass?: string;
+    /** Validates the normalised E.164 value. Overrides the built-in E.164-shape check. */
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
+    required?: boolean;
+    /** Calling code (digits, no `+`) prepended when the typed number has no leading `+`. Default `"1"`
+     *  (North America). Set to the calling code of the numbers your users enter without a `+`. */
+    defaultCallingCode?: string;
+    /** Normalise typed text → stored E.164. Override to plug a library (e.g. libphonenumber-js). */
+    parse?: (input: string, defaultCallingCode: string) => string;
+    /** Format the stored E.164 → field display (default: shown as-is). Override for a national /
+     *  pretty format from your phone library. */
+    format?: (value: string) => string;
+}
+declare const PhoneInput: import("svelte").Component<Props, {}, "element" | "value" | "valid" | "touched">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as PasswordInput } from "./components/PasswordInput.svelte";
 export { default as EmailInput } from "./components/EmailInput.svelte";
 export { default as SearchInput } from "./components/SearchInput.svelte";
 export { default as NumberInput } from "./components/NumberInput.svelte";
+export { default as PhoneInput } from "./components/PhoneInput.svelte";
 export { default as DateTimeInput } from "./components/DateTimeInput.svelte";
 export { default as Calendar } from "./components/Calendar.svelte";
 export { default as DatePicker } from "./components/DatePicker.svelte";

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as PasswordInput } from "./components/PasswordInput.svelte";
 export { default as EmailInput } from "./components/EmailInput.svelte";
 export { default as SearchInput } from "./components/SearchInput.svelte";
 export { default as NumberInput } from "./components/NumberInput.svelte";
+export { default as PhoneInput } from "./components/PhoneInput.svelte";
 export { default as DateTimeInput } from "./components/DateTimeInput.svelte";
 export { default as Calendar } from "./components/Calendar.svelte";
 export { default as DatePicker } from "./components/DatePicker.svelte";

package/dist/theme.css

@@ -67,9 +67,10 @@
 	 *                                 Fixed, NOT scaled by `size`, so different-size controls share a
 	 *                                 corner. (Pills like Toggle/Badge use rounded-full; the tiny
 	 *                                 Checkbox box keeps its own small radius — not worth a token.)
-	 *  --ui-border-color              soft internal divider (row separators, section splits) */
+	 *  --ui-border-color              soft internal divider (row separators, section splits) —
+	 *                                 the default (secondary) divider, mixed at `--ui-tint-divider` */
   --ui-border-radius: 0.375rem;
-  --ui-border-color: color-mix(in srgb, var(--ui-color-secondary) 30%, transparent);
+  --ui-border-color: color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-divider), transparent);
 }
 
 /* One interactive-surface language, library-wide. A subtle tint of the ACCENT colour, so it lightens on
@@ -104,15 +105,17 @@
   /* Tint SCALE for a variant-tinted surface (Badge chip, Card frame, `filled` Alert…). The colour is
 	 * always the component's own variant token; these are the shared STRENGTHS it's mixed at, so every
 	 * tinted surface is calculated the same way — change one number here, every component follows:
-	 *   fill:   color-mix(in srgb, var(<token>) var(--ui-tint-soft),         transparent)   soft resting fill
-	 *   border: color-mix(in srgb, var(<token>) var(--ui-tint-border),       transparent)   divider/frame (rest)
-	 *   hover:  color-mix(in srgb, var(<token>) var(--ui-tint-border-hover), transparent)   bordered field, hover/focus
-	 *   text:   color-mix(in srgb, var(<token>) var(--ui-tint-strong), var(--ui-color-text))  foreground
+	 *   fill:    color-mix(in srgb, var(<token>) var(--ui-tint-soft),         transparent)   soft resting fill
+	 *   divider: color-mix(in srgb, var(<token>) var(--ui-tint-divider),      transparent)   soft internal divider
+	 *   border:  color-mix(in srgb, var(<token>) var(--ui-tint-border),       transparent)   frame / field border (rest)
+	 *   hover:   color-mix(in srgb, var(<token>) var(--ui-tint-border-hover), transparent)   bordered field, hover/focus
+	 *   text:    color-mix(in srgb, var(<token>) var(--ui-tint-strong), var(--ui-color-text))  foreground
 	 * A primary badge is primary@soft/border/strong; a neutral one is text@… — one calculation, any
 	 * variant. `--ui-tint-border-hover` is the STRONGER step an interactive bordered field (Input,
 	 * TextArea, an outline Button) moves to on hover/focus. Theme-independent constants (no colour → no
 	 * per-theme scope needed) — but a theme MAY override these to tune the whole tint language. */
   --ui-tint-soft: 12%;
+  --ui-tint-divider: 30%; /* soft internal dividers — deliberately lighter than the 50% frame/field border */
   --ui-tint-border: 50%;
   --ui-tint-border-hover: 80%;
   --ui-tint-strong: 80%;

package/docs/components.md

@@ -207,6 +207,20 @@ blur/submit).
   and **`percent`** (display ×100 `%`, store the fraction; `min`/`max`/`step` in fraction units).
 - Dep-free by design — for locale/`Intl` or currency codes, format upstream or via `validate`.
 
+### PhoneInput
+
+Type any format; stores the bound value as **E.164** (`+15551234567`). Field shows what you type,
+snaps to canonical on blur.
+
+- **Location**: `src/lib/components/PhoneInput.svelte`
+- **Value**: `string` (E.164)
+- **Props**: `defaultCallingCode` (digits, default `"1"` — prepended when input has no `+`), `required`,
+  `validate` (validates the E.164), and the injection hooks **`parse`** (typed → E.164) / **`format`**
+  (E.164 → display).
+- **Dep-free** — normalises the E.164 *shape* only (no per-country validation/formatting). For that,
+  inject `parse`/`format`/`validate` backed by a phone library (e.g. `libphonenumber-js`); the
+  component bundles none.
+
 ## Navigation
 
 ### TabStrip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.39.d6b0fa5",
+  "version": "0.7.1-dev.41.d01009c",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"