docs nice to haves

Author: thejackshelton

apps/website/public/images/top-layer.webp

@@ -4,14 +4,14 @@ import { LuChevronDown } from '@qwikest/icons/lucide';
 
 export default component$(() => {
   useStyles$(styles);
-  const isCollapsibleRendered = useSignal(false);
+  const renderCollapsible = useSignal(false);
 
   return (
     <>
-      <button onClick$={() => (isCollapsibleRendered.value = true)}>
+      <button onClick$={() => (renderCollapsible.value = true)}>
         Render Collapsible
       </button>
-      {isCollapsibleRendered.value && (
+      {renderCollapsible.value && (
         <Collapsible.Root class="collapsible">
           <Collapsible.Trigger class="collapsible-trigger">
             <span>Trigger</span>

apps/website/src/routes/docs/headless/collapsible/examples/csr.tsx

@@ -39,7 +39,7 @@ export default component$(() => {
       >
         <Combobox.Label class="combobox-label">Pokemon 🦏</Combobox.Label>
         <Combobox.Control class="combobox-control">
-          <Combobox.Input placeholder="Jim" class="combobox-input" />
+          <Combobox.Input placeholder="Bulbasaur" class="combobox-input" />
           <Combobox.Trigger class="combobox-trigger">
             <LuChevronDown class="combobox-icon" />
           </Combobox.Trigger>

apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx

@@ -29,7 +29,7 @@ export default component$(() => {
     >
       <Combobox.Label class="combobox-label">Disabled ⛔</Combobox.Label>
       <Combobox.Control class="combobox-control">
-        <Combobox.Input placeholder="Jim" class="combobox-input" />
+        <Combobox.Input placeholder="Enabled" class="combobox-input" />
         <Combobox.Trigger class="combobox-trigger">
           <LuChevronDown class="combobox-icon" />
         </Combobox.Trigger>

apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx

@@ -21,9 +21,9 @@ export default component$(() => {
         options={highlightedExample}
         class="combobox-root"
       >
-        <Combobox.Label class="combobox-label">Star Wars 🧙‍♂️</Combobox.Label>
+        <Combobox.Label class="combobox-label">Highlighted 🚨</Combobox.Label>
         <Combobox.Control class="combobox-control">
-          <Combobox.Input placeholder="Jim" class="combobox-input" />
+          <Combobox.Input placeholder="not highlighted" class="combobox-input" />
           <Combobox.Trigger class="combobox-trigger">
             <LuChevronDown class="combobox-icon" />
           </Combobox.Trigger>

apps/website/src/routes/docs/headless/combobox/examples/highlighted-index.tsx

@@ -20,7 +20,7 @@ export default component$(() => {
     <Combobox.Root options={objectExample} class="combobox-root">
       <Combobox.Label class="combobox-label">Star Wars 🧙‍♂️</Combobox.Label>
       <Combobox.Control class="combobox-control">
-        <Combobox.Input placeholder="Jim" class="combobox-input" />
+        <Combobox.Input placeholder="C3PO" class="combobox-input" />
         <Combobox.Trigger class="combobox-trigger">
           <LuChevronDown class="combobox-icon" />
         </Combobox.Trigger>

apps/website/src/routes/docs/headless/combobox/examples/object.tsx

@@ -25,7 +25,7 @@ export default component$(() => {
     <Combobox.Root options={fruits} class="combobox-root">
       <Combobox.Label class="combobox-label">Fruits 🍓</Combobox.Label>
       <Combobox.Control class="combobox-control">
-        <Combobox.Input placeholder="Jim" class="combobox-input" />
+        <Combobox.Input placeholder="Cucumber" class="combobox-input" />
         <Combobox.Trigger class="combobox-trigger">
           <LuChevronDown class="combobox-icon" />
         </Combobox.Trigger>

apps/website/src/routes/docs/headless/combobox/examples/string.tsx

@@ -2,7 +2,7 @@
 title: Qwik UI | Modal
 ---
 
-import testImage from '../../../../../public/images/test-image.png';
+import topLayer from '../../../../../public/images/top-layer.webp';
 
 import { statusByComponent } from '~/_state/component-statuses';
 
@@ -112,7 +112,7 @@ To programmatically open or close the modal, we can use `bind:show`, a signal pr
 
 ## The Top Layer
 
-<image src={testImage} class="mb-6 rounded-base" />
+<img src={topLayer} class="mb-6 rounded-base" />
 
 In Chrome and Edge, a `top layer` UI button is shown in the dev tools. This means the element content is placed above any other content on the page, preventing any overflow or style issues.