@leonardaustin/ui 0.15.0 → 0.16.0

package/dist/components/ui/FieldContext.d.ts

@@ -3,6 +3,8 @@ export interface FieldContextValue {
     describedBy?: string;
     invalid?: boolean;
     required?: boolean;
+    /** Text a single-value Select shows in its empty closed control instead of a visible field label. */
+    placeholderLabel?: string;
 }
 export declare const FieldContext: import("react").Context<FieldContextValue | null>;
 export declare function describeField(...ids: (string | undefined)[]): string | undefined;

package/dist/components/ui/FieldContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldContext.d.ts","sourceRoot":"","sources":["../../../src/components/ui/FieldContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,wBAAgB,aAAa,CAAC,GAAG,GAAG,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,sBAM3D"}
+{"version":3,"file":"FieldContext.d.ts","sourceRoot":"","sources":["../../../src/components/ui/FieldContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AACD,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,wBAAgB,aAAa,CAAC,GAAG,GAAG,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,sBAM3D"}

package/dist/components/ui/FormField.d.ts

@@ -18,10 +18,18 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "ch
     required?: boolean;
     /** Text shown beside the label when the field is not required, e.g. "(optional)". */
     optionalLabel?: ReactNode;
+    /**
+     * `"placeholder"` visually hides the label and asks a child single-value
+     * `Select` without its own label to show the label text in its empty closed
+     * control. The label stays the accessible name. Only a string label can be
+     * shown as a placeholder; any other label stays above. Use it only around a
+     * single-value Select.
+     */
+    labelPlacement?: "above" | "placeholder";
     children: ReactNode | ((attributes: FieldControlAttributes) => ReactNode);
 }
 /** Label, hint and error association for one native control. */
-export declare function FormField({ id, label, hint, error, required, optionalLabel, children, className, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormField({ id, label, hint, error, required, optionalLabel, labelPlacement, children, className, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Standalone hint text for custom controls; connect its ID with aria-describedby. */
 export declare function FieldHint({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
 /** Standalone field error associated with its control. */

package/dist/components/ui/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/ui/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnE,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;CAC3E;AAED,gEAAgE;AAChE,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,2CA2ChB;AAED,sFAAsF;AACtF,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAItC;AACD,0DAA0D;AAC1D,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAEtC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/ui/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnE,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACzC,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;CAC3E;AAED,gEAAgE;AAChE,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,cAAwB,EACxB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,2CAmDhB;AAED,sFAAsF;AACtF,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAItC;AACD,0DAA0D;AAC1D,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAEtC"}

package/dist/components/ui/Select.d.ts

@@ -1,8 +1,11 @@
 import { type SelectHTMLAttributes } from "react";
 import { type ControlSize } from "../../providers/ControlSizeContext";
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value"> {
     /** Label text rendered above the select and linked to it. */
     label?: string;
+    /** Render the label inside an empty single-select control. Listboxes retain the above label. */
+    labelPlacement?: "above" | "placeholder";
+    value?: SelectHTMLAttributes<HTMLSelectElement>["value"] | null;
     /** Error message shown next to the label; also marks the select invalid and turns the border red. */
     error?: string;
     /** Helper text shown above the select and linked via `aria-describedby`. */

package/dist/components/ui/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAK9D,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,oCAAoC,CAAC;AAG5C,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACnE,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uFAAuF;IACvF,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM,2GAkFlB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,oCAAoC,CAAC;AAG5C,UAAU,WAAY,SAAQ,IAAI,CAChC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,CACR;IACC,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,cAAc,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACzC,KAAK,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAChE,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uFAAuF;IACvF,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM,2GAqMlB,CAAC"}

package/dist/components/ui/SelectDropdown.d.ts

@@ -6,9 +6,11 @@ interface SelectDropdownOption {
 }
 interface SelectDropdownProps {
     options: SelectDropdownOption[];
-    value: string;
+    value?: string | null;
     onChange: (value: string) => void;
     label?: string;
+    /** Render the label in the empty trigger, including when an empty-valued option is selected. */
+    labelPlacement?: "above" | "placeholder";
     placeholder?: string;
     className?: string;
     size?: "sm" | "md";
@@ -21,6 +23,6 @@ interface SelectDropdownProps {
  * typed text (the text resets after a short pause, and repeating a letter
  * cycles); on the closed trigger it selects the match without opening.
  */
-export declare function SelectDropdown({ options, value, onChange, label, placeholder, className, size, }: SelectDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectDropdown({ options, value, onChange, label, labelPlacement, placeholder, className, size, }: SelectDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SelectDropdown.d.ts.map

package/dist/components/ui/SelectDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ui/SelectDropdown.tsx"],"names":[],"mappings":"AASA,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAyB,EACzB,SAAS,EACT,IAAW,GACZ,EAAE,mBAAmB,2CAsQrB"}
+{"version":3,"file":"SelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ui/SelectDropdown.tsx"],"names":[],"mappings":"AASA,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,cAAc,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,cAAwB,EACxB,WAAyB,EACzB,SAAS,EACT,IAAW,GACZ,EAAE,mBAAmB,2CAqRrB"}

package/dist/components/ui/useFieldControl.d.ts

@@ -13,5 +13,6 @@ export declare function useFieldControl({ id, error, hint, describedBy, invalid,
     describedBy: string | undefined;
     invalid: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     required: boolean | undefined;
+    placeholderLabel: string | undefined;
 };
 //# sourceMappingURL=useFieldControl.d.ts.map

package/dist/components/ui/useFieldControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldControl.d.ts","sourceRoot":"","sources":["../../../src/components/ui/useFieldControl.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB;;;;;;;EAmBrB"}
+{"version":3,"file":"useFieldControl.d.ts","sourceRoot":"","sources":["../../../src/components/ui/useFieldControl.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB;;;;;;;;EAoBrB"}

package/dist/index.js

@@ -3168,139 +3168,140 @@ function ar() {
 }
 //#endregion
 //#region src/components/ui/SelectDropdown.tsx
-function or({ options: e, value: t, onChange: n, label: r, placeholder: i = "Select...", className: a, size: o = "md" }) {
-	let [s, c] = h(-1), { open: u, show: d, close: f, rootRef: p, anchorRef: g, triggerRef: y, popupRef: b, labelId: x, popupId: S, triggerAria: C } = Qn({
+function or({ options: e, value: t, onChange: n, label: r, labelPlacement: i = "above", placeholder: a = "Select...", className: o, size: s = "md" }) {
+	let [c, u] = h(-1), { open: d, show: f, close: p, rootRef: g, anchorRef: y, triggerRef: b, popupRef: x, labelId: S, popupId: C, triggerAria: w } = Qn({
 		haspopup: "listbox",
 		matchWidth: !0,
 		labelled: !!r
-	}), w = ar(), T = m(!1), D = m(!1), k = (e) => `${S}-option-${e}`, A = e.find((e) => e.value === t), j = m(!1);
+	}), T = ar(), D = m(!1), k = m(!1), A = (e) => `${C}-option-${e}`, j = i === "placeholder" && r && !t ? void 0 : e.find((e) => e.value === t), M = m(!1);
 	l(() => {
-		j.current && !u && w.clear(), j.current = u;
+		M.current && !d && T.clear(), M.current = d;
 	}), l(() => {
-		!u || !T.current || (T.current = !1, document.getElementById(k(s))?.scrollIntoView({ block: "nearest" }));
+		!d || !D.current || (D.current = !1, document.getElementById(A(c))?.scrollIntoView({ block: "nearest" }));
 	});
-	function M() {
+	function N() {
 		let n = e.findIndex((e) => e.value === t);
-		w.clear(), F(n >= 0 && !e[n].disabled ? n : L(1)), d();
-	}
-	function N(e) {
-		n(e.value), f("select");
+		T.clear(), I(n >= 0 && !e[n].disabled ? n : R(1)), f();
 	}
 	function P(e) {
-		D.current && (D.current = !1, e.detail === 0) || (u ? f("toggle") : M());
+		n(e.value), p("select");
 	}
 	function F(e) {
-		T.current = !0, c(e);
+		k.current && (k.current = !1, e.detail === 0) || (d ? p("toggle") : N());
+	}
+	function I(e) {
+		D.current = !0, u(e);
 	}
-	function I(t, n) {
+	function L(t, n) {
 		for (let r = t + n; r >= 0 && r < e.length; r += n) if (!e[r].disabled) return r;
 		return t;
 	}
-	function L(t) {
-		let n = I(t === 1 ? -1 : e.length, t);
+	function R(t) {
+		let n = L(t === 1 ? -1 : e.length, t);
 		return n >= 0 && n < e.length ? n : -1;
 	}
-	function R(r) {
+	function z(r) {
 		r.preventDefault();
-		let i = w.push(r.key), a = e.map((e) => e.label), o = (t) => !!e[t].disabled;
-		if (u) {
-			let e = ir(a, o, s, i);
-			e !== -1 && F(e);
+		let i = T.push(r.key), a = e.map((e) => e.label), o = (t) => !!e[t].disabled;
+		if (d) {
+			let e = ir(a, o, c, i);
+			e !== -1 && I(e);
 		} else {
 			let r = ir(a, o, e.findIndex((e) => e.value === t), i);
 			r !== -1 && e[r].value !== t && n(e[r].value);
 		}
 	}
-	function z(e) {
-		e.key === " " && D.current && e.preventDefault();
+	function B(e) {
+		e.key === " " && k.current && e.preventDefault();
 	}
-	function B(t) {
-		if (D.current = !1, t.key === " " && (u || w.active()) && (D.current = !0), tr(t) && (t.key !== " " || w.active())) {
-			R(t);
+	function ee(t) {
+		if (k.current = !1, t.key === " " && (d || T.active()) && (k.current = !0), tr(t) && (t.key !== " " || T.active())) {
+			z(t);
 			return;
 		}
-		if (!u) {
-			(t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), M());
+		if (!d) {
+			(t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), N());
 			return;
 		}
 		switch (t.key) {
 			case "ArrowDown":
-				t.preventDefault(), F(I(s, 1));
+				t.preventDefault(), I(L(c, 1));
 				break;
 			case "ArrowUp":
-				t.preventDefault(), F(I(s, -1));
+				t.preventDefault(), I(L(c, -1));
 				break;
 			case "Home":
 				t.preventDefault();
 				{
-					let e = L(1);
-					e !== -1 && F(e);
+					let e = R(1);
+					e !== -1 && I(e);
 				}
 				break;
 			case "End":
 				t.preventDefault();
 				{
-					let e = L(-1);
-					e !== -1 && F(e);
+					let e = R(-1);
+					e !== -1 && I(e);
 				}
 				break;
 			case "Enter":
 			case " ": {
 				t.preventDefault();
-				let n = e[s];
-				n && !n.disabled && N(n);
+				let n = e[c];
+				n && !n.disabled && P(n);
 				break;
 			}
 			case "Escape":
-				t.preventDefault(), f("escape");
+				t.preventDefault(), p("escape");
 				break;
 		}
 	}
 	return /* @__PURE__ */ v("div", {
-		className: K("flex flex-col gap-1.5", a),
-		ref: p,
+		className: K("flex flex-col gap-1.5", o),
+		ref: g,
 		children: [r && /* @__PURE__ */ _("span", {
-			id: x,
-			className: "ui-field-label font-label text-xs font-medium",
+			id: S,
+			className: K("ui-field-label font-label text-xs font-medium", i === "placeholder" && "sr-only"),
 			children: r
 		}), /* @__PURE__ */ v("div", {
 			className: "relative",
-			ref: g,
+			ref: y,
 			children: [
 				/* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: P,
-					onKeyDown: B,
-					onKeyUp: z,
-					ref: y,
-					...C,
-					"aria-activedescendant": u && s >= 0 ? k(s) : void 0,
-					className: K("font-control flex w-full cursor-pointer items-center rounded-md text-xs", "bg-bg-secondary border-border text-text-primary border", "hover:bg-bg-hover hover:border-border-strong", "transition-colors duration-[100ms]", "focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2", o === "sm" ? "h-6 px-2 pr-6" : "h-7 px-2 pr-7"),
-					children: A ? A.label : /* @__PURE__ */ _("span", {
+					onClick: F,
+					onKeyDown: ee,
+					onKeyUp: B,
+					ref: b,
+					...w,
+					"aria-activedescendant": d && c >= 0 ? A(c) : void 0,
+					className: K("font-control flex w-full cursor-pointer items-center rounded-md text-xs", "bg-bg-secondary border-border text-text-primary border", "hover:bg-bg-hover hover:border-border-strong", "transition-colors duration-[100ms]", "focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2", s === "sm" ? "h-6 px-2 pr-6" : "h-7 px-2 pr-7"),
+					children: j ? j.label : /* @__PURE__ */ _("span", {
 						className: "text-text-disabled",
-						children: i
+						"aria-hidden": i === "placeholder" && r ? !0 : void 0,
+						children: i === "placeholder" && r ? r : a
 					})
 				}),
-				/* @__PURE__ */ _(O, { className: K("text-text-tertiary pointer-events-none absolute top-1/2 h-3 w-3 -translate-y-1/2 transition-transform", o === "sm" ? "right-1.5" : "right-2", u && "rotate-180") }),
-				u && /* @__PURE__ */ _("div", {
-					ref: b,
+				/* @__PURE__ */ _(O, { className: K("text-text-tertiary pointer-events-none absolute top-1/2 h-3 w-3 -translate-y-1/2 transition-transform", s === "sm" ? "right-1.5" : "right-2", d && "rotate-180") }),
+				d && /* @__PURE__ */ _("div", {
+					ref: x,
 					className: K("bg-bg-tertiary border-border-strong animate-scale-in fixed top-0 left-0 z-[100] rounded-md border shadow-lg", "overflow-hidden"),
 					children: /* @__PURE__ */ _("ul", {
-						id: S,
+						id: C,
 						className: "max-h-48 overflow-y-auto py-1",
 						role: "listbox",
 						children: e.map((e, n) => /* @__PURE__ */ v("li", {
-							id: k(n),
+							id: A(n),
 							role: "option",
 							"aria-selected": e.value === t,
 							"aria-disabled": e.disabled || void 0,
 							onClick: () => {
-								e.disabled || N(e);
+								e.disabled || P(e);
 							},
 							onMouseEnter: () => {
-								e.disabled || c(n);
+								e.disabled || u(n);
 							},
-							className: K("font-control flex h-7 w-full items-center gap-2 px-3 text-xs", !e.disabled && "cursor-pointer", "transition-colors duration-[100ms]", e.disabled ? "text-text-disabled cursor-not-allowed" : n === s ? "bg-accent-muted text-accent" : e.value === t ? "text-accent" : "text-text-secondary hover:text-text-primary hover:bg-bg-hover"),
+							className: K("font-control flex h-7 w-full items-center gap-2 px-3 text-xs", !e.disabled && "cursor-pointer", "transition-colors duration-[100ms]", e.disabled ? "text-text-disabled cursor-not-allowed" : n === c ? "bg-accent-muted text-accent" : e.value === t ? "text-accent" : "text-text-secondary hover:text-text-primary hover:bg-bg-hover"),
 							children: [/* @__PURE__ */ _("span", {
 								className: "flex-1 truncate",
 								children: e.label
@@ -9199,7 +9200,8 @@ function Ts({ id: e, error: t, hint: n, describedBy: r, invalid: i, required: a
 		hintId: f,
 		describedBy: wr(r, s?.describedBy, f, d),
 		invalid: i ?? (!!t || s?.invalid || void 0),
-		required: a ?? s?.required
+		required: a ?? s?.required,
+		placeholderLabel: s?.placeholderLabel
 	};
 }
 //#endregion
@@ -9987,51 +9989,105 @@ function nc({ value: e, onChange: t, placeholder: n = "Search...", className: r
 }
 //#endregion
 //#region src/components/ui/Select.tsx
-var rc = a(({ label: e, error: t, options: n, className: r, id: i, hint: a, controlSize: o, required: s, "aria-describedby": c, "aria-invalid": l, ...u }, d) => {
-	let f = Ts({
-		id: i,
-		error: t,
-		hint: a,
-		describedBy: c,
-		invalid: l,
-		required: s
-	}), { inputId: p, errorId: m, hintId: h } = f, g = Un(o);
-	return /* @__PURE__ */ v("div", {
+var rc = a(({ label: e, labelPlacement: t = "above", error: n, options: r, className: i, id: a, hint: o, controlSize: c, required: u, "aria-describedby": d, "aria-invalid": f, ...p }, g) => {
+	let y = Ts({
+		id: a,
+		error: n,
+		hint: o,
+		describedBy: d,
+		invalid: f,
+		required: u
+	}), { inputId: b, errorId: x, hintId: S } = y, C = Un(c), w = m(null), T = s((e) => {
+		if (w.current = e, typeof g == "function") return g(e);
+		g && (g.current = e);
+	}, [g]), E = t === "placeholder" && e ? e : e ? void 0 : y.placeholderLabel, D = !!E && !p.multiple && (!p.size || p.size <= 1), k = p.value !== void 0, [A, j] = h(p.value ?? p.defaultValue ?? ""), M = k ? p.value ?? "" : A, N = D && M === "";
+	return l(() => {
+		let e = w.current;
+		if (!e || k || !D) return;
+		let t = !0;
+		queueMicrotask(() => {
+			t && j(e.value);
+		});
+		let n = e.form, r, i = () => {
+			clearTimeout(r), r = setTimeout(() => {
+				j(e.value);
+			}, 0);
+		};
+		n?.addEventListener("reset", i);
+		let a = new MutationObserver(() => {
+			j(e.value);
+		});
+		return a.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["value", "selected"]
+		}), () => {
+			t = !1, n?.removeEventListener("reset", i), a.disconnect(), clearTimeout(r);
+		};
+	}, [
+		k,
+		D,
+		p.form
+	]), /* @__PURE__ */ v("div", {
 		className: "flex flex-col gap-1.5",
 		children: [
-			a && /* @__PURE__ */ _("p", {
-				id: h,
+			o && /* @__PURE__ */ _("p", {
+				id: S,
 				className: "text-text-secondary text-xs",
-				children: a
+				children: o
 			}),
-			(e || t) && /* @__PURE__ */ v("div", {
-				className: "flex items-center justify-between",
+			(e || n) && /* @__PURE__ */ v("div", {
+				className: K("flex items-center justify-between", D && !n && "sr-only"),
 				children: [e && /* @__PURE__ */ _("label", {
-					htmlFor: p,
-					className: "ui-field-label font-label text-xs font-medium",
+					htmlFor: b,
+					className: K("ui-field-label font-label text-xs font-medium", D && "sr-only"),
 					children: e
-				}), t && /* @__PURE__ */ _("p", {
-					id: m,
+				}), n && /* @__PURE__ */ _("p", {
+					id: x,
 					className: "text-2xs text-red",
-					children: t
+					children: n
 				})]
 			}),
 			/* @__PURE__ */ v("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ _("select", {
-					ref: d,
-					"data-control-size": g,
-					required: f.required,
-					"aria-invalid": f.invalid,
-					"aria-describedby": f.describedBy,
-					id: p,
-					className: K("ui-sized-control bg-bg-secondary text-text-primary font-control h-7 w-full px-2 pr-7 text-xs", "appearance-none rounded-md border", "transition-colors duration-[100ms]", "focus:border-accent focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-40", "cursor-pointer", t ? "border-red" : "border-border", r),
-					...u,
-					children: n.map((e) => /* @__PURE__ */ _("option", {
-						value: e.value,
-						children: e.label
-					}, e.value))
-				}), /* @__PURE__ */ _(O, { className: "text-text-tertiary pointer-events-none absolute top-1/2 right-2.5 h-3.5 w-3.5 -translate-y-1/2" })]
+				"data-control-size": D ? C : void 0,
+				children: [
+					/* @__PURE__ */ v("select", {
+						ref: D ? T : g,
+						"data-control-size": C,
+						required: y.required,
+						"aria-invalid": y.invalid,
+						"aria-describedby": y.describedBy,
+						id: b,
+						className: K("ui-sized-control bg-bg-secondary text-text-primary font-control h-7 w-full px-2 pr-7 text-xs", "appearance-none rounded-md border", "transition-colors duration-[100ms]", "focus:border-accent focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-40", "cursor-pointer", n ? "border-red" : "border-border", i),
+						...p,
+						value: D && k ? p.value ?? "" : p.value ?? void 0,
+						defaultValue: D && !k ? p.defaultValue ?? "" : p.defaultValue,
+						onChange: D ? (e) => {
+							k || j(e.currentTarget.value), p.onChange?.(e);
+						} : p.onChange,
+						style: N ? {
+							...p.style,
+							color: "transparent"
+						} : p.style,
+						children: [D && !r.some((e) => e.value === "") && /* @__PURE__ */ _("option", {
+							value: "",
+							disabled: !0,
+							hidden: !0
+						}), r.map((e) => /* @__PURE__ */ _("option", {
+							value: e.value,
+							style: D ? { color: "var(--text-primary)" } : void 0,
+							children: e.label
+						}, e.value))]
+					}),
+					N && /* @__PURE__ */ _("span", {
+						"aria-hidden": "true",
+						className: "ui-select-placeholder text-text-disabled font-control pointer-events-none absolute top-1/2 -translate-y-1/2 truncate",
+						children: E
+					}),
+					/* @__PURE__ */ _(O, { className: "text-text-tertiary pointer-events-none absolute top-1/2 right-2.5 h-3.5 w-3.5 -translate-y-1/2" })
+				]
 			})
 		]
 	});
@@ -10849,27 +10905,28 @@ function Wc({ children: e }) {
 }
 //#endregion
 //#region src/components/ui/FormField.tsx
-function Gc({ id: e, label: t, hint: n, error: r, required: i, optionalLabel: a, children: o, className: s, ...c }) {
-	let l = u(), d = e ?? l, f = n ? `${d}-hint` : void 0, p = r ? `${d}-error` : void 0, m = {
-		id: d,
-		"aria-describedby": wr(f, p),
+function Gc({ id: e, label: t, hint: n, error: r, required: i, optionalLabel: a, labelPlacement: o = "above", children: s, className: c, ...l }) {
+	let d = u(), f = e ?? d, p = n ? `${f}-hint` : void 0, m = r ? `${f}-error` : void 0, h = o === "placeholder" && typeof t == "string" && t ? t : void 0, g = {
+		id: f,
+		"aria-describedby": wr(p, m),
 		"aria-invalid": !!r || void 0,
 		required: i
 	};
 	return /* @__PURE__ */ _(Cr.Provider, {
 		value: {
-			id: d,
-			describedBy: wr(f, p),
+			id: f,
+			describedBy: wr(p, m),
 			invalid: !!r,
-			required: i
+			required: i,
+			placeholderLabel: h
 		},
 		children: /* @__PURE__ */ v("div", {
-			...c,
-			className: K("flex flex-col gap-1.5", s),
+			...l,
+			className: K("flex flex-col gap-1.5", c),
 			children: [
 				/* @__PURE__ */ v("label", {
-					htmlFor: d,
-					className: "ui-field-label font-label text-xs font-medium",
+					htmlFor: f,
+					className: K("ui-field-label font-label text-xs font-medium", h && "sr-only"),
 					children: [
 						t,
 						i && /* @__PURE__ */ _("span", {
@@ -10880,16 +10937,16 @@ function Gc({ id: e, label: t, hint: n, error: r, required: i, optionalLabel: a,
 					]
 				}),
 				n && /* @__PURE__ */ _("p", {
-					id: f,
+					id: p,
 					className: "text-text-secondary text-xs",
 					children: n
 				}),
 				r && /* @__PURE__ */ _("p", {
-					id: p,
+					id: m,
 					className: "text-red text-xs",
 					children: r
 				}),
-				typeof o == "function" ? o(m) : o
+				typeof s == "function" ? s(g) : s
 			]
 		})
 	});

package/dist/styles.css

@@ -2048,6 +2048,23 @@ button.ui-sized-control[data-control-size="comfortable"] {
 select.ui-sized-control[data-control-size="comfortable"] {
   padding-inline-end: 2.25rem;
 }
+.ui-select-placeholder {
+  left: calc(var(--spacing) * 2);
+  right: calc(var(--spacing) * 7);
+  font-size: 0.75rem;
+}
+[data-control-size="compact"] > .ui-select-placeholder {
+  left: var(--ui-control-padding-x, calc(var(--spacing) * 2));
+  font-size: var(--ui-control-font-size, 0.75rem);
+}
+[data-control-size="comfortable"] > .ui-select-placeholder {
+  left: 0.75rem;
+  right: 2.25rem;
+  font-size: 1rem;
+}
+select:disabled + .ui-select-placeholder {
+  opacity: 0.4;
+}
 .ui-password-input[data-control-size="comfortable"] {
   padding-inline-end: 44px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leonardaustin/ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Reusable React component library and application shell for Leonard Austin projects.",
   "license": "MIT",
   "type": "module",