mark refs as experimental (#874)

Author: thejackshelton

.changeset/stale-mails-do.md

@@ -202,9 +202,9 @@ The `value` prop has been added to the `Combobox.Root` component to select the i
 
 You can also now listen to when the input value changes by using the `onInput$` prop on the `<Combobox.Root />` component.
 
-#### Passing refs to the combobox
+#### Passing refs to the combobox (experimental)
 
-The combobox is the first component to support passing refs! You can now pass a ref of your own to any component inside the combobox.
+The combobox is the first component to support passing refs! You can now pass a ref of your own to any component inside the combobox. This is an experimental feature, and we are still working on it, use at your own risk.
 
 ```tsx
 const inputRef = useSignal<HTMLInputElement>();

apps/website/src/routes/docs/headless/combobox/index.mdx

@@ -3,7 +3,6 @@ title: Qwik UI | Combobox
 ---
 
 import { statusByComponent } from '~/_state/component-statuses';
-import { FeatureList } from '~/components/feature-list/feature-list';
 
 <StatusBanner status={statusByComponent.headless.Combobox} />
 
@@ -297,9 +296,9 @@ When a value is not selected, the placeholder is displayed.
 
 ## Advanced
 
-### Using Refs
+### Using Refs (experimental)
 
-You can pass a ref to each Combobox component to access the underlying DOM element.
+You can pass a ref to each Combobox component to access the underlying DOM element. This is an experimental feature, and we are still working on it, use at your own risk.
 
 <Showcase name="refs" />
 

apps/website/src/routes/docs/headless/select/examples/hero.tsx

@@ -1,27 +1,12 @@
-import { component$, useSignal, useStyles$, useVisibleTask$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Select } from '@qwik-ui/headless';
 
 export default component$(() => {
   useStyles$(styles);
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
 
-  const rootRef = useSignal<HTMLDivElement>();
-  const labelRef = useSignal<HTMLDivElement>();
-  const triggerRef = useSignal<HTMLButtonElement>();
-  const displayValueRef = useSignal<HTMLDivElement>();
-  const popoverRef = useSignal<HTMLDivElement>();
-
-  useVisibleTask$(() => {
-    console.log('rootRef');
-    console.log(rootRef.value);
-    console.log(labelRef.value);
-    console.log(triggerRef.value);
-    console.log(displayValueRef.value);
-    console.log(popoverRef.value);
-  });
-
   return (
-    <Select.Root class="select" ref={rootRef}>
+    <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
         <Select.DisplayValue placeholder="Select an option" />