CHANGED: root classname elements on checkbox and radio components

NEW: opportunity control toggled state to each a segmented-buttons
FIXED: hover, focus and active states for slider in stylesheets

src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx

@@ -16,7 +16,7 @@ export const SegmentedButtons = forwardRef<
         (Button: ReactElement, index: number) => {
             return cloneElement(<SegmentButton />, {
                 ...Button.props,
-                toggled: toggled,
+                toggled: Button.props.toggled ?? toggled,
                 key: index,
             });
         },

src/primitive-components/input-components/checkbox/checkbox.tsx

@@ -19,7 +19,7 @@ import {
  */
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-    ({ centralRipple, ...props }, ref) => {
+    ({ centralRipple = true, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             [checked, setChecked] = useState<boolean>(props.checked ?? false),
             ripplesRef = useRef(null),
@@ -27,7 +27,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             events = useRippleEffect(ripplesRef, setIsActive);
 
         const extraClassStyles =
-            `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+            `m3 m3-checkbox-container ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         useImperativeHandle(ref, () => checkboxRef.current);
 
@@ -36,7 +36,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         }, [checkboxRef.current?.checked]);
 
         return (
-            <label {...events} className={extraClassStyles}>
+            <div {...events} className={extraClassStyles}>
                 <InputLayout
                     {...props}
                     indeterminate={props.indeterminate}
@@ -52,7 +52,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                     ref={ripplesRef}
                 />
                 {props.children}
-            </label>
+            </div>
         );
     },
 );

src/primitive-components/input-components/radio/radio.tsx

@@ -19,7 +19,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
             events = useRippleEffect(ripplesRef, setIsActive);
 
         const extraClassStyles =
-            `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
+            `m3 m3-radio-container ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         return (
             <div {...events} className={extraClassStyles}>

src/primitive-components/input-components/slider/slider.tsx

@@ -6,11 +6,13 @@ export const Slider = forwardRef<
     HTMLAttributes<HTMLInputElement>
 >((props, ref) => {
     return (
-        <InputLayout
-            className={props.className}
-            ref={ref}
-            type={'range'}
-            typeInput={'slider'}
-        />
+        <div className={'m3 m3-slider-container'}>
+            <InputLayout
+                className={props.className}
+                ref={ref}
+                type={'range'}
+                typeInput={'slider'}
+            />
+        </div>
     );
 });