ADDED: Base slider styles and disable state of segment-button

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

@@ -13,7 +13,14 @@ export const SegmentButton = forwardRef<
 >(
     (
         {
+            type,
             icon,
+            grade,
+            weight,
+            svgSize,
+            fillIcon,
+            iconSize,
+            opticalSize,
             toggled = false,
             iconPlace = 'left',
             centralRipple = false,
@@ -21,16 +28,6 @@ export const SegmentButton = forwardRef<
         },
         ref,
     ) => {
-        const {
-            fillIcon,
-            grade,
-            svgSize,
-            iconSize,
-            opticalSize,
-            type,
-            weight,
-        } = props;
-
         const [selectedState, setSelectedState] = useState<boolean>(false);
         const classes =
             `m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();

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

@@ -2,8 +2,8 @@
 
 import React, {
     forwardRef,
-    useEffect,
     useImperativeHandle,
+    useLayoutEffect,
     useRef,
 } from 'react';
 import { bool, string } from 'prop-types';
@@ -13,7 +13,7 @@ export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
     ({ indeterminate, typeInput, type, ...props }, ref) => {
         const checkboxRef = useRef<HTMLInputElement>(null);
 
-        useEffect(() => {
+        useLayoutEffect(() => {
             checkboxRef.current.indeterminate = indeterminate === true;
         }, []);
 
@@ -22,9 +22,7 @@ export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
         const classesType = typeInput || type;
 
         const extraClassStyles =
-            props.className !== undefined
-                ? `m3 m3-${type} ${props.className}`
-                : `m3 m3-${classesType}`;
+            `m3 m3-${classesType} ${props.className ?? ''}`.trimEnd();
 
         return (
             <input

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

@@ -5,5 +5,12 @@ export const Slider = forwardRef<
     HTMLInputElement,
     HTMLAttributes<HTMLInputElement>
 >((props, ref) => {
-    return <InputLayout ref={ref} type={'range'} />;
+    return (
+        <InputLayout
+            className={props.className}
+            ref={ref}
+            type={'range'}
+            typeInput={'slider'}
+        />
+    );
 });