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

app/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
-import { Checkbox } from '../src/primitive-components/components';
+import {Checkbox, Radio} from '../src/primitive-components/components';
 import { CardBody } from '../src/primitive-components/card/card-body';
 import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
@@ -25,7 +25,7 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px', maxWidth: '768px' }}>
+                <div style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}>
                     <Card variant={'outlined'}>
                         <CardHeader>
                             <Typography.h3> Header-3 </Typography.h3>
@@ -54,7 +54,7 @@ export default function Page() {
                                 <Button icon={'add'} iconPlace={'right'}>
                                     Label 2
                                 </Button>
-                                <SegmentedButtons toggled>
+                                <SegmentedButtons>
                                     <SegmentButton
                                         fillIcon={1}
                                         icon={'change_history'}
@@ -72,6 +72,8 @@ export default function Page() {
                                         Label 3
                                     </SegmentButton>
                                 </SegmentedButtons>
+                                <Checkbox />
+                                <Radio />
                                 <Slider />
                             </div>
                         </CardFooter>

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
+        <div className={'m3 m3-slider-container'}>
-            className={props.className}
+            <InputLayout
-            ref={ref}
+                className={props.className}
-            type={'range'}
+                ref={ref}
-            typeInput={'slider'}
+                type={'range'}
-        />
+                typeInput={'slider'}
+            />
+        </div>
     );
 });

src/styles/input-styles/checkbox.sass

@@ -1,4 +1,4 @@
-label.m3.m3-checkbox-label
+div.m3.m3-checkbox-container
     @include m3-label-mixin
     width: 18px
     height: 18px
@@ -28,12 +28,13 @@ input[type="checkbox"].m3.m3-checkbox
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     & ~ span.m3-checkbox-state
-        transition: color .2s cubic-bezier(0.2, 0, 0, 1)
         color: var(--md-sys-color-on-surface-variant)
+        transition: color .2s cubic-bezier(0.2, 0, 0, 1)
 
     &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
         & ~ span.m3-checkbox-state
             color: var(--md-sys-color-error)
+
         background: var(--md-sys-color-on-error)
 
     &:is(:user-invalid, .m3.m3-error):not(:checked)
@@ -43,6 +44,7 @@ input[type="checkbox"].m3.m3-checkbox
     &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
         & ~ span.m3-checkbox-state
             color: var(--md-sys-color-primary)
+
         background: var(--md-sys-color-on-primary)
 
     &:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
@@ -56,13 +58,13 @@ input[type="checkbox"].m3.m3-checkbox
         pointer-events: none
         z-index: 10
         display: flex
+        font-size: 24px
+        font-weight: 700
+        line-height: 24px
         align-items: center
         justify-content: center
-        line-height: 24px
         font-family: Material-Symbols-Outlined-Regular, sans-serif
-        font-weight: 700
+        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
-        font-size: 24px
-        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
 
     &:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
         content: "check_box_outline_blank"
@@ -72,6 +74,7 @@ input[type="checkbox"].m3.m3-checkbox
 
     &:checked ~ span.m3-checkbox-state::before
         content: "check_box"
+        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
 
     &:not(:disabled)
         &:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)

src/styles/input-styles/radio.sass

@@ -1,4 +1,4 @@
-div.m3.m3-radio
+div.m3.m3-radio-container
     width: 20px
     height: 20px
     align-items: center

src/styles/input-styles/slider.sass

@@ -1,9 +1,16 @@
+div.m3.m3-slider-container
+    height: 20px
+    display: flex
+    align-items: center
+
 input[type="range"].m3.m3-slider
+    margin: 0
     height: 4px
     appearance: none
-    border-radius: 2px
-    background-color: var(--md-sys-color-surface-container-highest)
     overflow: visible
+    border-radius: 2px
+    margin-inline: 10px
+    background-color: var(--md-sys-color-surface-container-highest)
 
     &::-webkit-slider-container
         margin-inline: -8px
@@ -19,13 +26,18 @@ input[type="range"].m3.m3-slider
         &:hover
             outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
+        &:is(:active, :focus-visible)
+            outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+
         width: 20px
         aspect-ratio: 1
         appearance: none
         overflow: visible
         border-radius: 50%
         box-sizing: border-box
+        outline: 10px solid transparent
         background: var(--md-sys-color-primary)
+        transition: .2s cubic-bezier(0.2, 0, 0, 1)