@camstack/ui-library 1.2.278 → 1.2.279

package/dist/index.cjs

@@ -10957,6 +10957,43 @@ var PasswordInput = (0, react$1.forwardRef)(({ value, onValueChange, shown, onTo
 });
 PasswordInput.displayName = "PasswordInput";
 //#endregion
+//#region src/primitives/select.tsx
+/**
+* A native `<select>` styled to match the rest of the field set.
+*
+* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
+* makes it match — and it is also what USED to make a disabled one a lie. A
+* browser greys a disabled control by rendering its own background and text
+* colour; all three of those are overridden here, so a `disabled` dropdown
+* looked exactly like a live one and simply ignored the click. That is the
+* whole of the "the language selector does not open" report of 2026-08-15:
+* the AI section's switch was off, every control under it was correctly inert,
+* and nothing on screen said so.
+*
+* `disabled:` classes belong HERE and not on each call site: there are dozens
+* of `<Select disabled>` in this app and the one that gets forgotten is the one
+* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
+*/
+var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+			ref,
+			disabled,
+			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			...props,
+			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
 //#region src/composites/config-secret-field.tsx
 /**
 * A keychain-stored secret in a settings form (D787, D789) — drawn as ONE
@@ -21313,43 +21350,6 @@ var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, re
 });
 Button.displayName = "Button";
 //#endregion
-//#region src/primitives/select.tsx
-/**
-* A native `<select>` styled to match the rest of the field set.
-*
-* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
-* makes it match — and it is also what USED to make a disabled one a lie. A
-* browser greys a disabled control by rendering its own background and text
-* colour; all three of those are overridden here, so a `disabled` dropdown
-* looked exactly like a live one and simply ignored the click. That is the
-* whole of the "the language selector does not open" report of 2026-08-15:
-* the AI section's switch was off, every control under it was correctly inert,
-* and nothing on screen said so.
-*
-* `disabled:` classes belong HERE and not on each call site: there are dozens
-* of `<Select disabled>` in this app and the one that gets forgotten is the one
-* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
-*/
-var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative w-full",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-			ref,
-			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
-			...props,
-			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: option.value,
-				children: option.label
-			}, option.value))
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
-		})]
-	});
-});
-Select.displayName = "Select";
-//#endregion
 //#region src/primitives/skeleton.tsx
 var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -28322,7 +28322,7 @@ function TimezoneSelector({ value, onChange, disabled }) {
 var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
 var LABEL_CLASS$1 = "block text-[11px] font-medium text-foreground mb-1 break-words";
 var DESC_CLASS = "text-[10px] text-foreground-subtle mt-0.5 break-words";
-function FieldWrapper({ label, description, required, span, children, translationFn }) {
+function FieldWrapper({ label, description, required, span, htmlFor, children, translationFn }) {
 	const colSpanClass = span === 2 ? "col-span-1 @[480px]:col-span-2" : span === 3 ? "col-span-1 @[480px]:col-span-2 @[880px]:col-span-3" : span === 4 ? "col-span-1 @[480px]:col-span-2 @[1140px]:col-span-4" : "col-span-1";
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -28332,6 +28332,7 @@ function FieldWrapper({ label, description, required, span, children, translatio
 		children: [
 			hasLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: LABEL_CLASS$1,
+				...htmlFor !== void 0 ? { htmlFor } : {},
 				children: [resolvedLabel, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "text-danger ml-0.5",
 					children: "*"
@@ -28500,24 +28501,27 @@ function BooleanField({ field, value, onChange, disabled, translationFn }) {
 }
 function SelectField({ field, value, onChange, disabled, translationFn }) {
 	const hasEmptyOption = field.options.some((o) => o.value === "");
+	const options = [...!field.required && !hasEmptyOption ? [{
+		value: "",
+		label: "— Select —"
+	}] : [], ...field.options.map((opt) => ({
+		value: opt.value,
+		label: opt.label
+	}))];
+	const controlId = `config-select-${field.key}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
 		label: field.label,
 		description: field.description,
 		required: field.required,
 		span: field.span,
+		htmlFor: controlId,
 		translationFn,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-			className: INPUT_CLASS,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+			id: controlId,
+			options,
 			value: value === void 0 || value === null ? "" : String(value),
 			disabled: disabled || field.disabled,
-			onChange: (e) => onChange(e.target.value),
-			children: [!field.required && !hasEmptyOption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: "",
-				children: "— Select —"
-			}), field.options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: opt.value,
-				children: opt.label
-			}, opt.value))]
+			onChange: (e) => onChange(e.target.value)
 		})
 	});
 }

package/dist/index.js

@@ -10933,6 +10933,43 @@ var PasswordInput = forwardRef(({ value, onValueChange, shown, onToggleShown, bu
 });
 PasswordInput.displayName = "PasswordInput";
 //#endregion
+//#region src/primitives/select.tsx
+/**
+* A native `<select>` styled to match the rest of the field set.
+*
+* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
+* makes it match — and it is also what USED to make a disabled one a lie. A
+* browser greys a disabled control by rendering its own background and text
+* colour; all three of those are overridden here, so a `disabled` dropdown
+* looked exactly like a live one and simply ignored the click. That is the
+* whole of the "the language selector does not open" report of 2026-08-15:
+* the AI section's switch was off, every control under it was correctly inert,
+* and nothing on screen said so.
+*
+* `disabled:` classes belong HERE and not on each call site: there are dozens
+* of `<Select disabled>` in this app and the one that gets forgotten is the one
+* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
+*/
+var Select = forwardRef(({ className, options, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsx("select", {
+			ref,
+			disabled,
+			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			...props,
+			children: options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
 //#region src/composites/config-secret-field.tsx
 /**
 * A keychain-stored secret in a settings form (D787, D789) — drawn as ONE
@@ -21289,43 +21326,6 @@ var Button = forwardRef(({ className, variant, size, ...props }, ref) => {
 });
 Button.displayName = "Button";
 //#endregion
-//#region src/primitives/select.tsx
-/**
-* A native `<select>` styled to match the rest of the field set.
-*
-* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
-* makes it match — and it is also what USED to make a disabled one a lie. A
-* browser greys a disabled control by rendering its own background and text
-* colour; all three of those are overridden here, so a `disabled` dropdown
-* looked exactly like a live one and simply ignored the click. That is the
-* whole of the "the language selector does not open" report of 2026-08-15:
-* the AI section's switch was off, every control under it was correctly inert,
-* and nothing on screen said so.
-*
-* `disabled:` classes belong HERE and not on each call site: there are dozens
-* of `<Select disabled>` in this app and the one that gets forgotten is the one
-* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
-*/
-var Select = forwardRef(({ className, options, disabled, ...props }, ref) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative w-full",
-		children: [/* @__PURE__ */ jsx("select", {
-			ref,
-			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
-			...props,
-			children: options.map((option) => /* @__PURE__ */ jsx("option", {
-				value: option.value,
-				children: option.label
-			}, option.value))
-		}), /* @__PURE__ */ jsx("div", {
-			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
-			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
-		})]
-	});
-});
-Select.displayName = "Select";
-//#endregion
 //#region src/primitives/skeleton.tsx
 var Skeleton = forwardRef(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -28298,7 +28298,7 @@ function TimezoneSelector({ value, onChange, disabled }) {
 var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
 var LABEL_CLASS$1 = "block text-[11px] font-medium text-foreground mb-1 break-words";
 var DESC_CLASS = "text-[10px] text-foreground-subtle mt-0.5 break-words";
-function FieldWrapper({ label, description, required, span, children, translationFn }) {
+function FieldWrapper({ label, description, required, span, htmlFor, children, translationFn }) {
 	const colSpanClass = span === 2 ? "col-span-1 @[480px]:col-span-2" : span === 3 ? "col-span-1 @[480px]:col-span-2 @[880px]:col-span-3" : span === 4 ? "col-span-1 @[480px]:col-span-2 @[1140px]:col-span-4" : "col-span-1";
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -28308,6 +28308,7 @@ function FieldWrapper({ label, description, required, span, children, translatio
 		children: [
 			hasLabel && /* @__PURE__ */ jsxs("label", {
 				className: LABEL_CLASS$1,
+				...htmlFor !== void 0 ? { htmlFor } : {},
 				children: [resolvedLabel, required && /* @__PURE__ */ jsx("span", {
 					className: "text-danger ml-0.5",
 					children: "*"
@@ -28476,24 +28477,27 @@ function BooleanField({ field, value, onChange, disabled, translationFn }) {
 }
 function SelectField({ field, value, onChange, disabled, translationFn }) {
 	const hasEmptyOption = field.options.some((o) => o.value === "");
+	const options = [...!field.required && !hasEmptyOption ? [{
+		value: "",
+		label: "— Select —"
+	}] : [], ...field.options.map((opt) => ({
+		value: opt.value,
+		label: opt.label
+	}))];
+	const controlId = `config-select-${field.key}`;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		label: field.label,
 		description: field.description,
 		required: field.required,
 		span: field.span,
+		htmlFor: controlId,
 		translationFn,
-		children: /* @__PURE__ */ jsxs("select", {
-			className: INPUT_CLASS,
+		children: /* @__PURE__ */ jsx(Select, {
+			id: controlId,
+			options,
 			value: value === void 0 || value === null ? "" : String(value),
 			disabled: disabled || field.disabled,
-			onChange: (e) => onChange(e.target.value),
-			children: [!field.required && !hasEmptyOption && /* @__PURE__ */ jsx("option", {
-				value: "",
-				children: "— Select —"
-			}), field.options.map((opt) => /* @__PURE__ */ jsx("option", {
-				value: opt.value,
-				children: opt.label
-			}, opt.value))]
+			onChange: (e) => onChange(e.target.value)
 		})
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.278",
+  "version": "1.2.279",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",