Merge branch 'master' into useRender/default-value

Author: mnajdova

docs/reference/generated/collapsible-panel.json

@@ -9,9 +9,9 @@
       "detailedType": "boolean | undefined"
     },
     "className": {
-      "type": "string | ((state: Collapsible.Root.State) => string)",
+      "type": "string | ((state: Collapsible.Panel.State) => string)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
-      "detailedType": "| string\n| ((state: Collapsible.Root.State) => string)"
+      "detailedType": "| string\n| ((state: Collapsible.Panel.State) => string)"
     },
     "keepMounted": {
       "type": "boolean",
@@ -20,9 +20,9 @@
       "detailedType": "boolean | undefined"
     },
     "render": {
-      "type": "ReactElement | ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)",
+      "type": "ReactElement | ((props: HTMLProps, state: Collapsible.Panel.State) => ReactElement)",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
-      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Collapsible.Root.State,\n  ) => ReactElement)"
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Collapsible.Panel.State,\n  ) => ReactElement)"
     }
   },
   "dataAttributes": {

docs/reference/generated/slider-root.json

@@ -83,11 +83,6 @@
       "description": "The component orientation.",
       "detailedType": "'horizontal' | 'vertical' | undefined"
     },
-    "inputRef": {
-      "type": "Ref<HTMLInputElement>",
-      "description": "A ref to access the hidden input element.",
-      "detailedType": "React.Ref<HTMLInputElement> | undefined"
-    },
     "className": {
       "type": "string | ((state: Slider.Root.State) => string)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."

docs/reference/generated/slider-thumb.json

@@ -39,6 +39,11 @@
       "description": "Whether the thumb should ignore user interaction.",
       "detailedType": "boolean | undefined"
     },
+    "inputRef": {
+      "type": "Ref<HTMLInputElement>",
+      "description": "A ref to access the nested input element.",
+      "detailedType": "React.Ref<HTMLInputElement> | undefined"
+    },
     "className": {
       "type": "string | ((state: Slider.Thumb.State) => string)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."

docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap

@@ -409,7 +409,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 items-center py-3">
             <Slider.Track className="relative h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
               <Slider.Indicator className="rounded bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+              <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
@@ -455,7 +455,7 @@ This example shows how to implement the component using CSS Modules.
   background-color: white;
   outline: 1px solid var(--color-gray-300);
 
-  &:focus-visible {
+  &:has(:focus-visible) {
     outline: 2px solid var(--color-blue);
   }
 }

docs/src/app/(private)/experiments/forms/form.tsx

@@ -32,7 +32,7 @@ const schema = z.object({
   input: z.string().min(1, 'This field is required'),
   checkbox: z.enum(['on']),
   switch: z.enum(['on']),
-  slider: z.number().min(40),
+  slider: z.number().max(90, 'Too loud'),
   'range-slider': z.array(z.number()),
   'number-field': z.number().min(0).max(100),
   select: z.enum(['sans', 'serif', 'mono', 'cursive']),
@@ -58,7 +58,11 @@ export const settingsMetadata: SettingsMetadata<Settings> = {
   },
 };
 
-async function submitForm(event: React.FormEvent<HTMLFormElement>, values: Values) {
+async function submitForm(
+  event: React.FormEvent<HTMLFormElement>,
+  values: Values,
+  native: boolean,
+) {
   event.preventDefault();
 
   const formData = new FormData(event.currentTarget);
@@ -70,6 +74,12 @@ async function submitForm(event: React.FormEvent<HTMLFormElement>, values: Value
   entries['range-slider'] = formData.getAll('range-slider').map((v) => parseFloat(v as string));
   entries['multi-select'] = formData.getAll('multi-select');
 
+  if (native) {
+    return {
+      errors: {},
+    };
+  }
+
   const result = schema.safeParse(entries);
 
   if (!result.success) {
@@ -102,9 +112,13 @@ export default function Page() {
         errors={errors}
         onClearErrors={setErrors}
         onSubmit={async (event) => {
-          const response = await submitForm(event, {
-            numberField: numberFieldValueRef.current,
-          });
+          const response = await submitForm(
+            event,
+            {
+              numberField: numberFieldValueRef.current,
+            },
+            native,
+          );
           setErrors(response.errors);
         }}
       >

docs/src/app/(private)/experiments/forms/rhf.tsx

@@ -224,13 +224,16 @@ export default function ExampleForm() {
                 <Slider.Root
                   value={field.value}
                   onValueChange={field.onChange}
-                  inputRef={field.ref}
                   className={styles.Slider}
                 >
                   <Slider.Control className={styles.SliderControl}>
                     <Slider.Track className={styles.SliderTrack}>
                       <Slider.Indicator className={styles.SliderIndicator} />
-                      <Slider.Thumb onBlur={field.onBlur} className={styles.SliderThumb} />
+                      <Slider.Thumb
+                        inputRef={field.ref}
+                        onBlur={field.onBlur}
+                        className={styles.SliderThumb}
+                      />
                     </Slider.Track>
                   </Slider.Control>
                 </Slider.Root>

docs/src/app/(public)/(content)/react/components/preview-card/page.mdx

@@ -20,7 +20,7 @@
 Import the component and assemble its parts:
 
 ```jsx title="Anatomy"
-import { PreviewCard } from '@base-ui-components/react/previewCard';
+import { PreviewCard } from '@base-ui-components/react/preview-card';
 
 <PreviewCard.Root>
   <PreviewCard.Trigger />

docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/css-modules/index.module.css

@@ -27,7 +27,7 @@
   background-color: white;
   outline: 1px solid var(--color-gray-300);
 
-  &:focus-visible {
+  &:has(:focus-visible) {
     outline: 2px solid var(--color-blue);
   }
 }

docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/tailwind/index.tsx

@@ -10,7 +10,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 items-center py-3">
             <Slider.Track className="relative h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
               <Slider.Indicator className="rounded bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800" />
+              <Slider.Thumb className="size-4 rounded-full bg-white outline outline-1 outline-gray-300 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>

eslint.config.mjs

@@ -148,7 +148,7 @@ export default defineConfig(
     files: [`test/**/*.${EXTENSION_TS}`],
     rules: {
       'guard-for-in': 'off',
-      'testing-library/no-dom-import': 'off', // We use `screen` in tests, so we need to import `@testing-library/dom`.
+      'testing-library/prefer-screen-queries': 'off', // Enable usage of playwright queries
       'testing-library/render-result-naming-convention': 'off', // inconsequential in regression tests
     },
   },