Fix read-only Input zero value and align Dropdown validation precedence

- Input: treat numeric 0 as a real value when read-only instead of showing the empty read-only marker
- PillInput: same read-only empty-value handling for consistency (internal)
- Dropdown: FormField validation status now takes precedence over the local validationStatus prop, matching the other form controls
- Add e2e tests for Input zero value, Dropdown validation precedence, and ComboBox read-only marker

Author: joshwooding

.changeset/dropdown-validation-precedence.md

@@ -0,0 +1,6 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed `Dropdown` validation status precedence to align with the other form controls, so the `FormField` validation status now takes precedence over the `Dropdown`'s own `validationStatus` prop.
+

.changeset/input-readonly-zero-value.md

@@ -0,0 +1,7 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed `Input` treating a numeric `0` value as empty when read-only, which caused the `emptyReadOnlyMarker` (`—`) to be shown instead of the real value. Only `null`, `undefined`, `""`, and empty arrays are now treated as empty.
+
+

packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx

@@ -7,6 +7,7 @@ import { CustomFloatingComponentProvider, FLOATING_TEST_ID } from "../common";
 const {
   Default,
   Readonly,
+  ReadonlyEmpty,
   WithDefaultSelected,
   Disabled,
   DisabledOption,
@@ -903,4 +904,16 @@ describe("Given a ComboBox", () => {
     cy.findByRole("combobox").should("not.have.attr", "aria-describedby");
     cy.findByRole("combobox").should("not.have.attr", "aria-labelledby");
   });
+
+  describe("WHEN read only", () => {
+    it("THEN should show the selected value rather than the empty marker", () => {
+      cy.mount(<Readonly />);
+      cy.findByRole("textbox").should("have.value", "California");
+    });
+
+    it("THEN should show the empty marker when there is no selection", () => {
+      cy.mount(<ReadonlyEmpty />);
+      cy.findByRole("textbox").should("have.value", "—");
+    });
+  });
 });

packages/core/src/__tests__/__e2e__/dropdown/Dropdown.cy.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Option } from "@salt-ds/core";
+import { Dropdown, FormField, FormFieldLabel, Option } from "@salt-ds/core";
 import * as dropdownStories from "@stories/dropdown/dropdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { type KeyboardEventHandler, useRef, useState } from "react";
@@ -526,4 +526,31 @@ describe("Given a Dropdown", () => {
       .should("exist")
       .and("have.attr", "role", "listbox");
   });
+
+  describe("validation status", () => {
+    it("should use its own validation status when not in a FormField", () => {
+      cy.mount(
+        <Dropdown validationStatus="warning">
+          <Option value={1}>1</Option>
+        </Dropdown>,
+      );
+      cy.findByRole("combobox").should("have.class", "saltDropdown-warning");
+    });
+
+    it("should prioritize the FormField validation status over its own", () => {
+      cy.mount(
+        <FormField validationStatus="error">
+          <FormFieldLabel>Field</FormFieldLabel>
+          <Dropdown validationStatus="warning">
+            <Option value={1}>1</Option>
+          </Dropdown>
+        </FormField>,
+      );
+      cy.findByRole("combobox").should("have.class", "saltDropdown-error");
+      cy.findByRole("combobox").should(
+        "not.have.class",
+        "saltDropdown-warning",
+      );
+    });
+  });
 });

packages/core/src/__tests__/__e2e__/input/Input.cy.tsx

@@ -175,6 +175,18 @@ describe("GIVEN an Input", () => {
         cy.findByRole("textbox").should("have.value", "#");
       });
     });
+
+    describe("AND the value is zero", () => {
+      it("THEN should show the zero value rather than the empty marker", () => {
+        cy.mount(<Input defaultValue={0} readOnly />);
+        cy.findByRole("textbox").should("have.value", "0");
+      });
+
+      it("THEN should show a controlled zero value rather than the empty marker", () => {
+        cy.mount(<Input value={0} readOnly />);
+        cy.findByRole("textbox").should("have.value", "0");
+      });
+    });
   });
 
   describe("WHEN used in Formfield", () => {

packages/core/src/dropdown/Dropdown.tsx

@@ -177,7 +177,7 @@ export const Dropdown = forwardRef(function Dropdown<Item>(
 
   const disabled = Boolean(disabledProp) || formFieldDisabled;
   const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
-  const validationStatus = validationStatusProp ?? formFieldValidationStatus;
+  const validationStatus = formFieldValidationStatus ?? validationStatusProp;
   const required = formFieldRequired
     ? ["required", "asterisk"].includes(formFieldRequired)
     : requiredProp;

packages/core/src/input/Input.tsx

@@ -74,6 +74,16 @@ export interface InputProps
   bordered?: boolean;
 }
 
+function isEmptyReadOnlyValue(
+  value: InputProps["value"] | InputProps["defaultValue"],
+) {
+  return (
+    value == null ||
+    value === "" ||
+    (Array.isArray(value) && value.length === 0)
+  );
+}
+
 export const Input = forwardRef<HTMLDivElement, InputProps>(
   function Input(props, ref) {
     const { className, props: finalProps } = useClassNameInjection(
@@ -134,7 +144,10 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(
 
     const [focused, setFocused] = useState(false);
 
-    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
+    const isEmptyReadOnly =
+      isReadOnly &&
+      isEmptyReadOnlyValue(defaultValueProp) &&
+      isEmptyReadOnlyValue(valueProp);
     const defaultValue = isEmptyReadOnly
       ? emptyReadOnlyMarker
       : defaultValueProp;

packages/core/src/pill-input/PillInput.tsx

@@ -85,6 +85,16 @@ export interface PillInputProps
   bordered?: boolean;
 }
 
+function isEmptyReadOnlyValue(
+  value: PillInputProps["value"] | PillInputProps["defaultValue"],
+) {
+  return (
+    value == null ||
+    value === "" ||
+    (Array.isArray(value) && value.length === 0)
+  );
+}
+
 export const PillInput = forwardRef(function PillInput(
   {
     "aria-activedescendant": ariaActiveDescendant,
@@ -148,7 +158,10 @@ export const PillInput = forwardRef(function PillInput(
   const [focused, setFocused] = useState(false);
   const [focusedPillIndex, setFocusedPillIndex] = useState(-1);
 
-  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
+  const isEmptyReadOnly =
+    isReadOnly &&
+    isEmptyReadOnlyValue(defaultValueProp) &&
+    isEmptyReadOnlyValue(valueProp);
   const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
 
   const {