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

app/page.tsx

@@ -8,10 +8,10 @@ import { CardFooter } from '../src/primitive-components/card/card-footer';
 import { CardHeader } from '../src/primitive-components/card/card-header';
 import { Typography } from '../src/primitive-components/typography/typography';
 import { CardActionArea } from '../src/primitive-components/card/card-action-area';
+import { Slider } from '../src/primitive-components/input-components/slider/slider';
 import { Button } from '../src/primitive-components/button-components/button/button';
 import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
 import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
-import {Slider} from "../src/primitive-components/input-components/slider/slider";
 
 export default function Page() {
     return (
@@ -68,10 +68,11 @@ export default function Page() {
                                     >
                                         Label 2
                                     </SegmentButton>
-                                    <SegmentButton>Label 3</SegmentButton>
+                                    <SegmentButton disabled>
+                                        Label 3
+                                    </SegmentButton>
                                 </SegmentedButtons>
                                 <Slider />
-                                <Checkbox />
                             </div>
                         </CardFooter>
                     </Card>

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-${classesType} ${props.className ?? ''}`.trimEnd();
-                ? `m3 m3-${type} ${props.className}`
-                : `m3 m3-${classesType}`;
 
         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'}
+        />
+    );
 });

src/styles/button-styles/segmented-button.sass

@@ -30,6 +30,12 @@ div.m3.m3-segmented-buttons
         & > svg > text
             fill: var(--md-sys-color-on-surface)
 
+        &:disabled
+            border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
+
+            & > *
+                opacity: 38%
+
         &.selected
             background-color: var(--md-sys-color-secondary-container)
 

src/styles/generics.css

@@ -753,6 +753,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
   fill: var(--md-sys-color-on-surface);
 }
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
+  opacity: 38%;
+}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
   background-color: var(--md-sys-color-secondary-container);
 }
@@ -869,6 +875,35 @@ div.m3.m3-radio svg > circle.m3-radio-state {
   r: 5px;
 }
 
+input[type=range].m3.m3-slider {
+  height: 4px;
+  appearance: none;
+  border-radius: 2px;
+  background-color: var(--md-sys-color-surface-container-highest);
+  overflow: visible;
+}
+input[type=range].m3.m3-slider::-webkit-slider-container {
+  margin-inline: -8px;
+}
+input[type=range].m3.m3-slider::-webkit-slider-thumb {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  width: 20px;
+  aspect-ratio: 1;
+  appearance: none;
+  overflow: visible;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: var(--md-sys-color-primary);
+}
+input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
+  width: 40px;
+  aspect-ratio: 1;
+  background-color: transparent;
+}
+input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+
 div.m3.m3-switch {
   margin: 4px;
   gap: 20px;

src/styles/generics.sass

@@ -14,6 +14,7 @@
 @import "button-styles/segmented-button"
 
 @import "input-styles/radio"
+@import "input-styles/slider"
 @import "input-styles/swtich"
 @import "input-styles/checkbox"
 @import "input-styles/text-field"

src/styles/input-styles/slider.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=slider.css.map */

src/styles/input-styles/slider.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"slider.css"}

src/styles/input-styles/slider.sass

@@ -0,0 +1,32 @@
+input[type="range"].m3.m3-slider
+    height: 4px
+    appearance: none
+    border-radius: 2px
+    background-color: var(--md-sys-color-surface-container-highest)
+    overflow: visible
+
+    &::-webkit-slider-container
+        margin-inline: -8px
+
+    &::-webkit-slider-thumb
+        @include elevation-1(false)
+
+        &::after
+            width: 40px
+            aspect-ratio: 1
+            background-color: transparent
+
+        &:hover
+            &::after
+                background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+
+        width: 20px
+        aspect-ratio: 1
+        appearance: none
+        overflow: visible
+        border-radius: 50%
+        box-sizing: border-box
+        background: var(--md-sys-color-primary)
+
+
+