@spaethtech/svelte-ui 0.21.5-dev.149.8ed1480 → 0.21.5-dev.150.7bf55da

package/dist/components/Input.svelte

@@ -3,7 +3,7 @@
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
-  import type { Variant } from "../types/variants.js";
+  import { variantToken, type Variant } from "../types/variants.js";
   import FieldChrome, { nextFieldId } from "./FieldChrome.svelte";
 
   // Omit the native `size` attribute (character width, a number) — we repurpose `size` as the
@@ -191,22 +191,50 @@
       paddingClasses = "px-2";
     }
 
-    // Border colour comes from the variant map (the shared tint scheme — token @ --ui-tint-border at
-    // rest, @ --ui-tint-border-hover on hover/focus — same as Card/DataTable/TextArea, so every bordered
-    // surface stays uniform under any theme). `borderless` overrides it with transparent (the field's
-    // own background) — the 1px box stays, so the field never jumps, and the focus outline still fires.
-    const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
+    // Frame + fill follow the field's "liveness", ordered by the shared border-tint ladder — all from
+    // the variant's OWN token via `--field-accent` (set on the wrapper below; neutral/ghost → the
+    // neutral token), so there's NO `secondary` special-case: editable 50% > read-only 35% > disabled
+    // 15% (quiet → live). Read-only and disabled take the muted neutral fill; editable fills with the
+    // page background. `borderless` (editable only) drops the visible frame while keeping the 1px box.
+    const editableFrame = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
     // Field background follows the variant axis: `ghost` is transparent (chromeless); every other
     // variant fills with --ui-color-background so the field reads as a field on a non-white page.
-    const fieldBg =
+    const editableBg =
       variant === "ghost" ? "bg-transparent" : "[background-color:var(--ui-color-background)]";
+    const mutedFill =
+      "[background-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-fill-muted),transparent)]";
+
+    let fillStyles: string;
+    let frameStyles: string;
+    let stateStyles = ""; // cursor + (for read-only) the inset focus ring
+    if (disabled) {
+      // Quietest frame; muted fill; not focusable (no ring). No more secondary-blue border.
+      fillStyles = mutedFill;
+      frameStyles =
+        "[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-disabled),transparent)]";
+      stateStyles = "cursor-not-allowed";
+    } else if (readonly) {
+      // A distinct read-only look: quieter-than-editable frame (35% → 80% on hover/focus), muted fill,
+      // full-strength text, and the focus ring kept (keyboard users land here). The ring is drawn INSIDE
+      // the frame (outline-offset -2px) so a scrolling Card/Dialog can't clip it.
+      fillStyles = mutedFill;
+      frameStyles =
+        "[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-readonly),transparent)] hover:[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-hover),transparent)]";
+      stateStyles =
+        "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus-within:[outline-offset:-2px]";
+    } else {
+      fillStyles = editableBg;
+      frameStyles = editableFrame;
+      stateStyles =
+        "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus-within:[outline-offset:-2px]";
+    }
+
     const themeStyles = [
-      fieldBg,
+      fillStyles,
       "border", // 1px — matches --ui-border (List/TextArea); uniform across the library
       paddingClasses,
       frameStyles,
-      "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
-      "focus-within:[outline-offset:0px]",
+      stateStyles,
     ].join(" ");
 
     // Error state (shared): chrome `error` set OR a failing `validate` (once touched).
@@ -216,15 +244,7 @@
         "[border-color:var(--ui-color-error)] focus-within:[ring-color:var(--ui-color-error)]";
     }
 
-    // Disabled state — borders are uniformly 1px now, so no padding compensation is needed.
-    // (readonly renders like a normal field: same 1px frame + hover/focus glow, e.g. Select's trigger.)
-    let disabledStyles = "";
-    if (disabled) {
-      disabledStyles =
-        "![background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] cursor-not-allowed";
-    }
-
-    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
+    return `${base} ${themeStyles} ${validationStyles}`.trim();
   });
 
   let inputClasses = $derived.by(() => {
@@ -240,6 +260,10 @@
       "disabled:bg-transparent",
       "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)]",
       "disabled:cursor-not-allowed",
+      // Read-only keeps full-strength text but reads as non-editable: a text cursor (it's selectable)
+      // and no blinking caret (nothing to type).
+      "read-only:cursor-text",
+      "read-only:[caret-color:transparent]",
     ].join(" ");
 
     return `${base} ${themeStyles} ${inputClass}`.trim();
@@ -323,7 +347,11 @@
   class={containerClass}
 >
   {#snippet control({ describedBy })}
-    <div bind:this={fieldElement} class="relative {wrapperClasses}" style="user-select: none;">
+    <div
+      bind:this={fieldElement}
+      class="relative {wrapperClasses}"
+      style="user-select: none; --field-accent: var({variantToken[variant]});"
+    >
       {#if icon && iconPosition === "left"}
       {#if iconClickable}
         <div

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

@@ -2,7 +2,7 @@ import type { Snippet } from "svelte";
 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 Variant } from "../types/variants.js";
 interface Props extends Omit<HTMLInputAttributes, "size"> {
     /** Accepts number too so remote-form field spreads (`{...field.as(...)}`) type-check. */
     value?: string | number;

package/dist/theme.css

@@ -124,7 +124,10 @@
 	 * 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-fill-muted: 5%; /* disabled / read-only field fill — a faint neutral wash (quieter than soft) */
+  --ui-tint-border-disabled: 15%; /* disabled field frame — the QUIETEST frame (a disabled control recedes) */
   --ui-tint-divider: 30%; /* soft internal dividers — deliberately lighter than the 50% frame/field border */
+  --ui-tint-border-readonly: 35%; /* read-only field frame — quieter than editable (50%), louder than a divider */
   --ui-tint-border: 50%;
   --ui-tint-border-hover: 80%;
   --ui-tint-strong: 80%;

package/docs/themes.md

@@ -65,6 +65,27 @@ theme-independent** (identical in light and dark) — only the accent color flip
   `color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-border), transparent)` for a frame edge,
   `--ui-tint-border-hover` for its hover.)
 
+### Field states — the border-tint ladder
+
+A field's frame reflects how "live" it is, all from the **variant's own token** (so a `neutral` field is
+monochrome, a `primary` field tints blue — there is **no `secondary` special-case** for disabled):
+
+| state | border tint | fill |
+|---|---|---|
+| editable | `--ui-tint-border` (50%) → `--ui-tint-border-hover` (80%) on hover/focus | page background |
+| **read-only** | `--ui-tint-border-readonly` (**35%**) → 80% on hover/focus | `--ui-tint-fill-muted` |
+| **disabled** | `--ui-tint-border-disabled` (**15%**) | `--ui-tint-fill-muted` |
+
+- `--ui-tint-border-readonly` — `35%` — read-only frame (quieter than editable, louder than a divider).
+- `--ui-tint-border-disabled` — `15%` — disabled frame, the **quietest** (a disabled control recedes).
+- `--ui-tint-fill-muted` — `5%` — the faint neutral wash behind a read-only or disabled field
+  (`color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-fill-muted), transparent)`).
+
+Read-only keeps **full-strength text**, a text cursor, and the focus ring (it's selectable/focusable),
+but hides the caret; disabled dims its text to 40%. The focus ring is drawn **inside** the frame
+(`outline-offset: -2px`) so a scrolling `Card`/`Dialog` can't clip it. Overriding these percentages
+per theme retunes read-only/disabled everywhere at once.
+
 ## Sizing — the `size` axis (`sm` / `md` / `lg`)
 
 ### Control heights

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.5-dev.149.8ed1480",
+  "version": "0.21.5-dev.150.7bf55da",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"