@spaethtech/svelte-ui 0.21.5-dev.149.8ed1480 → 0.21.5-dev.151.b182d28

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/components/Select2.svelte

@@ -24,7 +24,7 @@
   import FieldChrome, { nextFieldId } from "./FieldChrome.svelte";
   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";
 
   type Option = Record<string, any> & {
     value: string;
@@ -190,24 +190,39 @@
     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 =
+    const editableFrame = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
+    const editableBg =
       variant === "ghost" ? "bg-transparent" : "[background-color:var(--ui-color-background)]";
+    // Disabled picks ONE frame (not appended) so it isn't overridden by the editable border at equal
+    // specificity: the quietest frame from the field's OWN variant token via --field-accent (NOT the old
+    // secondary-blue) + the shared muted fill. A native <select> has no read-only state. The focus ring
+    // is drawn INSIDE the frame (offset -2px) so a scrolling container can't clip it (matches Input).
+    let fillStyles: string;
+    let frameStyles: string;
+    let stateStyles = "";
+    if (disabled) {
+      fillStyles =
+        "[background-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-fill-muted),transparent)]";
+      frameStyles =
+        "[border-color:color-mix(in_srgb,var(--field-accent)_var(--ui-tint-border-disabled),transparent)]";
+      stateStyles = "cursor-not-allowed";
+    } 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",
       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]",
+      stateStyles,
     ].join(" ");
     const validationStyles = invalid
       ? "[border-color:var(--ui-color-error)] focus-within:[ring-color:var(--ui-color-error)]"
       : "";
-    const disabledStyles = disabled
-      ? "![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();
   });
 
   // The <select> itself — mirrors Input's inner <input> (flex-1, transparent, no border/outline).
@@ -237,7 +252,7 @@
 
 <FieldChrome {label} {aside} {error} {description} required={!!required} {controlId} {size} class={className}>
   {#snippet control({ describedBy })}
-    <div class={wrapperClasses}>
+    <div class={wrapperClasses} style="--field-accent: var({variantToken[variant]});">
       <!-- The real control: native <select>. We set `selected` per-option (rather than `bind:value`,
            which forbids a dynamic `multiple`) so SSR emits the correct selected option — right text
            before hydration / with JS off — and `onchange` keeps client state in sync. -->

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

@@ -21,7 +21,7 @@ import type { HTMLSelectAttributes } from "svelte/elements";
 import type { FieldChromeProps } from "./field-chrome.js";
 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";
 type Option = Record<string, any> & {
     value: string;
     label: string;

package/dist/components/TextArea.svelte

@@ -6,7 +6,7 @@
   import type { Snippet } from "svelte";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, resolveScalar, type Responsive } from "../types/responsive.js";
-  import type { Variant } from "../types/variants.js";
+  import { variantToken, type Variant } from "../types/variants.js";
   import { DEV } from "esm-env";
   import FieldChrome, { nextFieldId } from "./FieldChrome.svelte";
 
@@ -319,19 +319,37 @@
   let wrapperClasses = $derived.by(() => {
     const base = `relative w-full [border-radius:var(--ui-border-radius)] border ${padClass}`;
 
-    // Border colour from the variant map (same calc as Input); `borderless` → transparent (its own
-    // background), keeping the 1px box + focus outline.
-    const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
-    // Field background follows the variant axis: `ghost` transparent; every other variant fills with
-    // --ui-color-background so the field reads as a field on a non-white surface.
-    const fieldBg =
+    // Frame + fill follow the field's liveness, all from the variant's OWN token via `--field-accent`
+    // (set on the wrapper below; neutral/ghost → the neutral token) — same ladder + inset focus ring as
+    // Input: editable 50% > read-only 35% > disabled 15%, with a muted neutral fill for the inert states.
+    const editableFrame = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
+    const editableBg =
       variant === "ghost" ? "bg-transparent" : "[background-color:var(--ui-color-background)]";
-    const themeStyles = [
-      fieldBg,
-      frameStyles,
-      "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
-      "focus-within:[outline-offset:0px]",
-    ].join(" ");
+    const mutedFill =
+      "![background-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-fill-muted),transparent)]";
+    const insetRing =
+      "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus-within:[outline-offset:-2px]";
+
+    let fillStyles: string;
+    let frameStyles: string;
+    let stateStyles = "";
+    if (disabled) {
+      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) {
+      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 = insetRing;
+    } else {
+      fillStyles = editableBg;
+      frameStyles = editableFrame;
+      stateStyles = insetRing;
+    }
+
+    const themeStyles = [fillStyles, frameStyles, stateStyles].join(" ");
 
     // Error state (shared): chrome `error` set OR a failing `validate` (once touched).
     let validationStyles = "";
@@ -340,12 +358,7 @@
         "[border-color:var(--ui-color-error)] focus-within:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-error)_70%,transparent)]";
     }
 
-    // Disabled state — borders are uniformly 1px, so no padding compensation is needed.
-    const disabledStyles = disabled
-      ? "![background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_50%,transparent)] cursor-not-allowed"
-      : "";
-
-    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
+    return `${base} ${themeStyles} ${validationStyles}`.trim();
   });
 
   let textareaClasses = $derived.by(() => {
@@ -358,6 +371,9 @@
       "disabled:bg-transparent",
       "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)]",
       "disabled:cursor-not-allowed",
+      // Read-only (but not disabled): text cursor, no caret — matches Input. (`effectiveReadonly` sets
+      // the readonly attr on disabled too, so gate on the raw props to avoid fighting disabled's cursor.)
+      readonly && !disabled ? "cursor-text [caret-color:transparent]" : "",
     ].join(" ");
 
     // Padding adjustment for the copy icon (only when the button is shown)
@@ -708,6 +724,7 @@
         }}
     role="group"
     aria-label={i18n.messages.textAreaControls}
+    style="--field-accent: var({variantToken[variant]});"
   >
     <textarea
       bind:this={textareaElement}

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

@@ -2,7 +2,7 @@ import type { HTMLTextareaAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
 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";
 type TextAreaCopy = "none" | "selection" | "button";
 interface Props extends Omit<HTMLTextareaAttributes, "oncopy"> {
     value?: string;

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.151.b182d28",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"