@spaethtech/svelte-ui 0.21.5-dev.150.7bf55da → 0.21.5-dev.151.b182d28

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/package.json

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