From 190362cdaabb3d7d66ece38af202ff6bbb2dbd0b Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Fri, 2 Oct 2026 19:28:02 +1000
Subject: [PATCH] Drop the Select scope class and trim Select JSDoc

---
 .../react/src/core/primitives/field/field.tsx |  5 ++--
 .../src/core/primitives/select/select.tsx     | 28 +++++++------------
 .../src/core/primitives/select/styles.css.ts  | 11 +-------
 .../src/core/select-field/select-field.tsx    | 19 ++-----------
 4 files changed, 15 insertions(+), 48 deletions(-)

diff --git a/packages/@luke-ui/react/src/core/primitives/field/field.tsx b/packages/@luke-ui/react/src/core/primitives/field/field.tsx
index 7152571b..a22c5451 100644
--- a/packages/@luke-ui/react/src/core/primitives/field/field.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/field/field.tsx
@@ -54,9 +54,8 @@ interface FieldSlotProps extends FieldSlotContentProps {
 export type FieldAccessibleNameProps =
 	| (FieldSlotContentProps & {
 			/**
-			 * Visible label. Pass non-empty, textual, non-interactive content: the label is a native
-			 * `<label>` element. Place links and buttons outside it, and associate external label content
-			 * with `aria-labelledby` instead.
+			 * Visible label. Pass non-empty, textual, non-interactive content. Place links and buttons
+			 * outside it, and associate external label content with `aria-labelledby` instead.
 			 */
 			label: Exclude<ReactNode, boolean | null | undefined>;
 			'aria-label'?: never;
diff --git a/packages/@luke-ui/react/src/core/primitives/select/select.tsx b/packages/@luke-ui/react/src/core/primitives/select/select.tsx
index dc21d8be..025f89b5 100644
--- a/packages/@luke-ui/react/src/core/primitives/select/select.tsx
+++ b/packages/@luke-ui/react/src/core/primitives/select/select.tsx
@@ -30,7 +30,7 @@ import { ComboboxItem } from '../combobox/item.js';
 import { comboboxRecipe } from '../combobox/styles.css.js';
 import { rootIdProps } from '../root-id.js';
 import type { SelectSize } from './styles.css.js';
-import { selectRecipe, selectRootScopeClassName } from './styles.css.js';
+import { selectRecipe } from './styles.css.js';
 
 export type { SelectSize };
 
@@ -164,12 +164,10 @@ export type SelectItemProps<T extends object> = Prettify<
 >;
 
 /**
- * Semantic root for a select. It connects the trigger, listbox, label, description, and error
- * parts inside it, and owns the select's value, state, validation, and size. It holds one
- * selected option.
+ * Semantic root for a select. It owns the value, state, validation, and size of the parts inside
+ * it.
  *
- * `id`, `className`, and `ref` target the root element. Pass `triggerId` to set the trigger's id.
- * Pass `value` and `onChange` for a controlled select, or `defaultValue` for an uncontrolled one.
+ * `id`, `className`, and `ref` target the root element. `triggerId` targets the trigger.
  */
 export function SelectRoot(props: SelectRootProps): JSX.Element {
 	const { className, id, size = 'medium', triggerId, ...selectProps } = props;
@@ -180,10 +178,7 @@ export function SelectRoot(props: SelectRootProps): JSX.Element {
 				{...selectProps}
 				{...rootIdProps(id, triggerId)}
 				className={composeRenderProps(className, (renderedClassName) => {
-					return cx(
-						selectRootScopeClassName,
-						selectRecipe().root({ className: renderedClassName }),
-					);
+					return selectRecipe().root({ className: renderedClassName });
 				})}
 			/>
 		</SelectSizeContext.Provider>
@@ -191,11 +186,8 @@ export function SelectRoot(props: SelectRootProps): JSX.Element {
 }
 
 /**
- * The button that opens the select. It owns the control chrome: the border, background, focus
- * ring, and disabled state. While the root is invalid, it takes the danger border. It draws no
- * error icon, because `FieldError` carries it.
- *
- * Invalid and disabled state come from the root, so the trigger has no props for them.
+ * The button that opens the select and draws its control chrome. While the root is invalid it takes
+ * the danger border. `FieldError` carries the error icon.
  */
 export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
 	const { children, className, ...buttonProps } = props;
@@ -257,9 +249,9 @@ export function SelectIndicator(props: SelectIndicatorProps): JSX.Element {
 }
 
 /**
- * Popover surface for the listbox. It is as wide as the trigger. The portal inherits the
- * document's theme: importing a theme stylesheet themes the whole document from `:root`, so no
- * propagation is needed. A colour mode scoped below `<html>` does not reach the portal.
+ * Popover surface for the listbox. The portal inherits the document's theme: importing a theme
+ * stylesheet themes the whole document from `:root`, so no propagation is needed. A colour mode
+ * scoped below `<html>` does not reach the portal.
  */
 export function SelectPopover(props: SelectPopoverProps): JSX.Element {
 	const { offset = 4, ref, ...popoverProps } = props;
diff --git a/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts b/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts
index 43e4bded..8288f359 100644
--- a/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts
+++ b/packages/@luke-ui/react/src/core/primitives/select/styles.css.ts
@@ -1,20 +1,12 @@
 import { vars } from '../../../theme/contract.css.js';
 import { FONT_METRIC_SCALE } from '../../../theme/font-metric-scale.js';
-import { classSelector } from '../../styles/class-selector.js';
 import { focusRing } from '../../styles/focus-ring.js';
 import { descendantDisabledSelector } from '../../styles/input-states.js';
-import { style } from '../../styles/layered-style.css.js';
 import type { SlottedConfigInput } from '../../styles/recipe.js';
 import { recipe } from '../../styles/recipe.js';
 
-/**
- * Marker class on every `SelectRoot`. React Aria publishes validity on the root as `data-invalid`,
- * and the trigger reads it through this class.
- */
-export const selectRootScopeClassName = style({}, 'select-root');
-
 const notDisabled = ':not([data-disabled="true"])';
-const rootInvalid = `${classSelector(selectRootScopeClassName)}[data-invalid="true"] &${notDisabled}`;
+const rootInvalid = `[data-invalid="true"] &${notDisabled}`;
 
 /**
  * Raw slotted config for the Select primitives.
@@ -25,7 +17,6 @@ const rootInvalid = `${classSelector(selectRootScopeClassName)}[data-invalid="tr
  *
  * The trigger draws the same well chrome as `comboboxRecipe`'s `control` slot and
  * `textInputPartsRecipe`'s `control` slot. Change the three together until they share one source.
- * The field's error message carries the error icon, so the trigger draws only the danger border.
  */
 const selectConfig = {
 	slots: {
diff --git a/packages/@luke-ui/react/src/core/select-field/select-field.tsx b/packages/@luke-ui/react/src/core/select-field/select-field.tsx
index 55766882..32db9a00 100644
--- a/packages/@luke-ui/react/src/core/select-field/select-field.tsx
+++ b/packages/@luke-ui/react/src/core/select-field/select-field.tsx
@@ -14,13 +14,12 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from '../primitives/select/select.js';
-import type { SelectSize } from '../primitives/select/styles.css.js';
 import type { DistributiveOmit } from '../types/distributive-omit.js';
 import type { Prettify } from '../types/prettify.js';
 
 type _SelectFieldOmit = DistributiveOmit<
 	SelectRootProps,
-	'aria-label' | 'aria-labelledby' | 'children' | 'isInvalid' | 'size'
+	'aria-label' | 'aria-labelledby' | 'children' | 'isInvalid'
 >;
 
 interface _SelectFieldBaseProps<T extends object> extends _SelectFieldOmit {
@@ -33,12 +32,8 @@ interface _SelectFieldBaseProps<T extends object> extends _SelectFieldOmit {
 	errorMessage?: ReactNode;
 	/** Options for the render function in `children`. */
 	items?: SelectListBoxProps<T>['items'];
-	/** Placeholder text shown while nothing is selected. */
-	placeholder?: string;
 	/** Forwarded to the field's root element. Use `triggerRef` for the trigger. */
 	ref?: SelectRootProps['ref'];
-	/** Control size. @default 'medium' */
-	size?: SelectSize;
 	/**
 	 * Forwarded to the trigger `<button>` element. Accepts a callback ref or a ref object. Use `ref`
 	 * for the root element.
@@ -55,9 +50,6 @@ export type SelectFieldProps<T extends object> = Prettify<_SelectFieldProps<T>>;
  * A single-selection field with a label, description, validation message, and a popover list of
  * options.
  *
- * It composes `SelectRoot`, `Field`, `SelectTrigger`, `SelectPopover`, and `SelectListBox`. Pass
- * `value` and `onChange` for a controlled field, or `defaultValue` for an uncontrolled one.
- *
  * `id`, `className`, and `ref` target the field's root element. `triggerId` and `triggerRef` target
  * the trigger.
  */
@@ -69,8 +61,6 @@ export function SelectField<T extends object>(props: SelectFieldProps<T>): JSX.E
 		items,
 		label,
 		necessityIndicator,
-		placeholder,
-		size = 'medium',
 		triggerRef,
 		...rootProps
 	} = props;
@@ -78,12 +68,7 @@ export function SelectField<T extends object>(props: SelectFieldProps<T>): JSX.E
 	const normalizedErrorMessage = normalizeErrorMessage(errorMessage);
 
 	return (
-		<SelectRoot
-			{...rootProps}
-			isInvalid={isInvalidFromErrorMessage(normalizedErrorMessage)}
-			placeholder={placeholder}
-			size={size}
-		>
+		<SelectRoot {...rootProps} isInvalid={isInvalidFromErrorMessage(normalizedErrorMessage)}>
 			<Field
 				description={description}
 				errorMessage={normalizedErrorMessage}
-- 
2.51.2