FIX: better naming

Author: TheMcnafaha

apps/website/src/routes/docs/headless/checkbox/examples/test-list.tsx

@@ -2,6 +2,7 @@ import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
 import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
 import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
 import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
+import { ChecklistIndicator } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <>
@@ -12,21 +13,28 @@ export default component$(() => {
           class="flex items-center gap-3 bg-slate-900 p-2 text-white"
           checkList={true}
         >
-          <CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
-            ✅
-          </CheckboxIndicator>
-          <p>Controlls all</p>
+          <ChecklistIndicator class="w-fit bg-black">
+            <div q:slot="checkbox" id="true-img">
+              ✅
+            </div>
+
+            <div q:slot="checklist" id="mixed-img">
+              ➖
+            </div>
+          </ChecklistIndicator>
+
+          <p>Get All</p>
         </Checkbox>
 
         <Checkbox class="flex items-center gap-3 bg-slate-900 pr-2 text-white">
           <CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
-          <p>No other stuff is needed here</p>
+          <p>Cat One</p>
         </Checkbox>
 
         <Checkbox class="bg-slate-900 text-white">
           <div class="flex items-center gap-3">
             <CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
-            <p>No other stuff is needed here</p>
+            <p>Cat Two</p>
           </div>
         </Checkbox>
       </CheckList>

packages/kit-headless/src/components/checkbox/checkbox.tsx

@@ -12,7 +12,7 @@ import {
 } from '@builder.io/qwik';
 import { CheckListContext, CheckboxContext } from './context-id';
 import { TriBool, getTriBool } from './checklist-context-wrapper';
-export type TriStateCheckboxProps = {
+export type MixedStateCheckboxProps = {
   checkBoxSig?: Signal<boolean>;
   checkList?: boolean;
   _useCheckListContext?: boolean;
@@ -32,16 +32,16 @@ export type ChecklistTwoStateCheckboxProps = {
   _useCheckListContext?: boolean;
   _overWriteCheckbox?: boolean;
 } & PropsOf<'div'>;
-export const Checkbox = component$<TriStateCheckboxProps>((props) => {
+export const Checkbox = component$<MixedStateCheckboxProps>((props) => {
   // this is done to avoid consumers dealing with two types checkboxes, could go in different files
   if (props._useCheckListContext && !props.checkList) {
     console.log('using chechlist');
   }
   if (props.checkList) {
     return (
-      <TriStateCheckbox {...props}>
+      <MixedStateCheckbox {...props}>
         <Slot />
-      </TriStateCheckbox>
+      </MixedStateCheckbox>
     );
   }
   if (props._useCheckListContext) {
@@ -145,7 +145,7 @@ export const ChecklistTwoStateCheckbox = component$<ChecklistTwoStateCheckboxPro
   },
 );
 
-export const TriStateCheckbox = component$<TriStateCheckboxProps>((props) => {
+export const MixedStateCheckbox = component$<MixedStateCheckboxProps>((props) => {
   // all the sig stuff should be refactored into a fancy hook
   const checklistContext = useContext(CheckListContext);
   const childCheckboxes = checklistContext.checkboxes;

packages/kit-headless/src/components/checkbox/checklist.tsx

@@ -89,7 +89,6 @@ export const CheckList: Component<CheckListProps> = (props: CheckListProps) => {
 
   return (
     <>
-      {checkArr.length}
       <ChecklistContextWrapper
         ariaLabeledBy={props.ariaLabeledBy}
         arrSize={boolArr.length}