ADDED: slider label but it's not done

app/page.tsx

@@ -1,89 +1,14 @@
 import React from 'react';
 import { Card } from '../src/primitive-components/card/card';
-import {
-    Button,
-    FAB,
-    IconButton,
-} from '../src/primitive-components/components';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
-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 (
         <main>
             <Card variant={'outlined'}>
                 <CardFooter>
-                    <Button> Default Button </Button>
-                    <Button ripple={false}> Default Button </Button>
-                    <FAB icon={'edit'} variant={'secondary'} />
-                    <FAB icon={'edit'} ripple={false} variant={'secondary'} />
-
-                    <IconButton icon={'settings'} variant={'filled'} />
-                    <IconButton icon={'settings'} variant={'default'} />
-                    <IconButton icon={'settings'} variant={'tonal'} />
-                    <IconButton icon={'settings'} variant={'outlined'} />
-
-                    <IconButton
-                        icon={'settings'}
-                        toggled={{
-                            selected: 'settings',
-                            unselected: 'settings',
-                        }}
-                        variant={'filled'}
-                    />
-                    <IconButton
-                        icon={'settings'}
-                        toggled={{
-                            selected: 'settings',
-                            unselected: 'settings',
-                        }}
-                        variant={'default'}
-                    />
-                    <IconButton
-                        icon={'settings'}
-                        toggled={{
-                            selected: 'settings',
-                            unselected: 'settings',
-                        }}
-                        variant={'tonal'}
-                    />
-                    <IconButton
-                        icon={'settings'}
-                        toggled={{
-                            selected: 'settings',
-                            unselected: 'settings',
-                        }}
-                        variant={'outlined'}
-                    />
-
-                    <SegmentedButtons density={-2} selectable={true}>
-                        <SegmentButton
-                            fillIcon={1}
-                            icon={'change_history'}
-                            ripple={false}
-                        >
-                            Label 1
-                        </SegmentButton>
-                        <SegmentButton
-                            fillIcon={1}
-                            icon={'change_history'}
-                            iconPlace={'right'}
-                            ripple={false}
-                            selectable={false}
-                        >
-                            Not selectable
-                        </SegmentButton>
-                        <SegmentButton
-                            fillIcon={1}
-                            icon={'change_history'}
-                            iconPlace={'right'}
-                            ripple={false}
-                        >
-                            Label 3
-                        </SegmentButton>
-                        <SegmentButton disabled>Label 4</SegmentButton>
-                    </SegmentedButtons>
+                    <Slider />
                 </CardFooter>
             </Card>
         </main>

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

@@ -3,9 +3,9 @@
 import React, { forwardRef } from 'react';
 import { ButtonProps } from './button.types';
 import { bool, oneOf, string } from 'prop-types';
-import { ButtonLayout } from '../button-layout/button-layout';
 import { IconWrapper } from '../../icon/icon-wrapper';
 import { Typography } from '../../typography/typography';
+import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
  * Button component

src/primitive-components/button-components/icon-button/icon-button.tsx

@@ -3,7 +3,12 @@
 import { Icon } from '../../components';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import React, {
+    forwardRef,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
 import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 
 /**
@@ -41,7 +46,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
         const buttonRef = useRef<HTMLButtonElement>(null);
 
-        const callback = event => {
+        const callback = (event: React.MouseEvent<HTMLButtonElement>) => {
             if (toggled) {
                 if (toggleIcon.state === 'selected') {
                     toggle('', toggled.unselected ?? 'add_circle');
@@ -67,8 +72,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             >
                 <Icon
                     fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
-                    iconSize={28}
+                    iconSize={24}
                     svgSize={40}
+                    type={'rounded'}
                 >
                     {toggled ? toggleIcon.icon : icon ? icon : undefined}
                 </Icon>

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

@@ -1,13 +1,13 @@
 'use client';
 
 import { string } from 'prop-types';
+import { Icon } from '../../components';
 import React, { forwardRef, useState } from 'react';
 import { IconWrapper } from '../../icon/icon-wrapper';
 import { Typography } from '../../typography/typography';
 import { SegmentedButton } from './segmented-buttons.types';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { ButtonLayoutProps } from '../button-layout/button-layout.types';
-import { Icon } from '../../components';
 
 /**
  * Segment button

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { Typography } from '../../typography/typography';
 import { InputLayout } from '../input-layout/input-layout';
 import React, {
     ChangeEvent,
@@ -14,33 +15,71 @@ interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
     options?: number[];
 }
 
+function fractionCalc(current: number | string, max: number | string): number {
+    const _current = isNaN(parseInt(current as string))
+        ? 50
+        : parseInt(current as string);
+    const _max = isNaN(parseInt(max as string)) ? 100 : parseInt(max as string);
+
+    return (_current / _max) * 100;
+}
+
+function gradientStyle(value: number): string {
+    return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`;
+}
+
 export const Slider = forwardRef<HTMLInputElement, SliderProps>(
     ({ options, ...props }, ref) => {
         const sliderId = useId();
         const [isChrome, setIsChrome] = useState<boolean>(false);
+        const [value, setValue] = useState(props.defaultValue ?? 50);
 
         useLayoutEffect(() => {
             setIsChrome(navigator.userAgent.indexOf('AppleWebKit') != -1);
         }, []);
 
+        if (isChrome) {
+            const initialFraction = fractionCalc(
+                (props.value as string) ?? (props.defaultValue as string),
+                props.max as string,
+            );
+
+            if (props.style === undefined) {
+                props.style = {};
+            }
+
+            props.style.background = gradientStyle(initialFraction);
+        }
+
+        const webkitProgress = (event: ChangeEvent<HTMLInputElement>) => {
+            if (isChrome) {
+                const fraction = fractionCalc(
+                    (event.target.value as string) ??
+                        (event.target.defaultValue as string),
+                    event.target.max,
+                );
+
+                event.target.style.background = gradientStyle(fraction);
+            }
+        };
+
         return (
             <div className={'m3 m3-slider-container'}>
+                <div className={'m3 m3-slider-label'}>
+                    <Typography role={'label'} size={'small'}>
+                        {value}
+                    </Typography>
+                </div>
                 <InputLayout
                     {...props}
                     className={props.className}
                     list={sliderId}
                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
                         props.onChange?.apply(this, props?.onChange?.prototype);
+                        setValue(event.target.value);
 
                         if (isChrome) {
-                            const fraction =
-                                (parseInt(event.target.value) /
-                                    parseInt(event.target.max)) *
-                                100;
-                            event.target.style.background = `linear-gradient(\
-                            to right, var(--md-sys-color-primary) ${fraction}%, \
-                            var(--md-sys-color-surface-container-highest) ${fraction}%\
-                            )`;
+                            webkitProgress(event);
                         }
                     }}
                     ref={ref}

src/styles/button-styles/fabs.sass

@@ -18,7 +18,7 @@
         background: color-mix(in srgb, var($color) 12%, transparent)
 
     &:not(&:has(span.m3.m3-ripple-domain)):active
-        &:before
+        &::before
             background: color-mix(in srgb, var($color) 20%, transparent)
 
 
@@ -26,7 +26,7 @@ button.m3.m3-fab
     transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
 
     & > span.m3-icon
-        font-family: Material-Symbols-Outlined-Regular, sans-serif
+        font-family: Material-Symbols-Rounded-Regular, sans-serif
 
     &.m3
         contain: content
@@ -39,7 +39,7 @@ button.m3.m3-fab
         border: none
         gap: 12px
 
-    &:before
+    &::before
         @include m3-buttons-state-layer-mixin
 
         content: ""

src/styles/button-styles/icon-button.sass

@@ -2,13 +2,19 @@
     &:is(.default, .outlined)::before
         background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
 
-    &.filled::before, &.filled.toggled.selected::before
+    &.outlined.selected.toggled::before
+        background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)
+
+    &.filled::before,
+    &.filled.selected.toggled::before
         background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
 
-    &.filled.toggled::before
+    &.filled:not(.selected).toggled::before,
+    &.default.selected.toggled::before
         background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
 
-    &.tonal::before, &.tonal.toggled.selected::before
+    &.tonal::before,
+    &.tonal.selected.toggled::before
         background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
 
     &.tonal.toggled::before
@@ -66,7 +72,9 @@ button.m3.m3-icon-button
         &.selected.toggled
             @include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
 
-        &:disabled, &.selected:disabled, &.selected.toggled:disabled
+        &:disabled,
+        &.selected:disabled,
+        &.selected.toggled:disabled
             @include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
 
     &.filled
@@ -120,7 +128,7 @@ button.m3.m3-icon-button
             background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
 
     &.tonal:not(:disabled)
-        &:is(&.selected.toggled, &):not(&.toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple
+        &:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
         &:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple

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

@@ -40,7 +40,7 @@ div.m3.m3-segmented-buttons
         background-color: transparent
         border: 1px solid var(--md-sys-color-outline)
 
-        &:before
+        &::before
             @include m3-buttons-state-layer-mixin
 
             content: ""
@@ -67,6 +67,8 @@ div.m3.m3-segmented-buttons
                 visibility: hidden
 
         & > span.m3.m3-button-segment-content-layer
+            @include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)
+
             position: absolute
 
             & > svg.m3.m3-svg-icon
@@ -82,12 +84,12 @@ div.m3.m3-segmented-buttons
                     display: initial
 
         &:not(:disabled):hover
-            &:before
+            &::before
                 background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
 
         &:is(&:not(&:has(span.m3.m3-ripple-domain)):active, &:focus-visible)
-            &:before
-                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent)
+            &::before
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
         &:disabled
             border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)

src/styles/fonts.css

@@ -3,7 +3,7 @@
   src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
   src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
 @font-face {
-  font-family: Material-Symbols-Outlined-Regular;
+  font-family: Material-Symbols-Rounded-Regular;
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
 @font-face {

src/styles/generics.css

@@ -311,7 +311,7 @@ button.m3.m3-fab {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
 }
 button.m3.m3-fab > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
+  font-family: Material-Symbols-Rounded-Regular, sans-serif;
 }
 button.m3.m3-fab.m3 {
   contain: content;
@@ -324,7 +324,7 @@ button.m3.m3-fab.m3 {
   border: none;
   gap: 12px;
 }
-button.m3.m3-fab:before {
+button.m3.m3-fab::before {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -344,7 +344,7 @@ button.m3.m3-fab.surface > svg.m3-svg-icon {
 button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before {
+button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active::before {
   background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 button.m3.m3-fab.primary {
@@ -360,7 +360,7 @@ button.m3.m3-fab.primary > svg.m3-svg-icon {
 button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
-button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before {
+button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active::before {
   background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
 }
 button.m3.m3-fab.secondary {
@@ -376,7 +376,7 @@ button.m3.m3-fab.secondary > svg.m3-svg-icon {
 button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
-button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before {
+button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active::before {
   background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
 }
 button.m3.m3-fab.tertiary {
@@ -392,7 +392,7 @@ button.m3.m3-fab.tertiary > svg.m3-svg-icon {
 button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
-button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before {
+button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active::before {
   background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent);
 }
 button.m3.m3-fab.m3-small-fab {
@@ -658,7 +658,7 @@ button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).t
 button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
 }
-button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
+button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
@@ -667,13 +667,16 @@ button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:
 button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
 }
-button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
+button.m3.m3-icon-button:hover:not(:disabled).outlined.selected.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 8%, transparent);
+}
+button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.selected.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
 }
-button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
+button.m3.m3-icon-button:hover:not(:disabled).filled:not(.selected).toggled::before, button.m3.m3-icon-button:hover:not(:disabled).default.selected.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
+button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.selected.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
 button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
@@ -682,13 +685,16 @@ button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
 button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):is(.default, .outlined)::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }
-button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled.selected::before {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).outlined.selected.toggled::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
+}
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.selected.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
 }
-button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled::before {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled:not(.selected).toggled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).default.selected.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled.selected::before {
+button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.selected.toggled::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before {
@@ -755,7 +761,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
   background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment::before {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -787,6 +793,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-se
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
   position: absolute;
 }
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text {
+  fill: var(--md-sys-color-on-surface);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > label.m3.m3-typography {
+  color: var(--md-sys-color-on-surface);
+}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
   display: none;
 }
@@ -802,11 +814,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
   display: initial;
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible)::before {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 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);
@@ -913,6 +925,29 @@ div.m3.m3-slider-container {
   display: flex;
   align-items: center;
 }
+div.m3.m3-slider-container div.m3.m3-slider-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  pointer-events: none;
+}
+div.m3.m3-slider-container div.m3.m3-slider-label::before {
+  content: "";
+  width: 28px;
+  rotate: 45deg;
+  aspect-ratio: 1;
+  position: absolute;
+  border-radius: 14px 14px 0 14px;
+  background-color: var(--md-sys-color-primary);
+}
+div.m3.m3-slider-container div.m3.m3-slider-label > label.m3.m3-typography {
+  display: inline;
+  font-weight: 500;
+  position: absolute;
+  font-size: 12px !important;
+  color: var(--md-sys-color-on-primary);
+}
 div.m3.m3-slider-container > datalist {
   display: none;
 }

src/styles/icon.css

@@ -48,7 +48,7 @@ svg.m3.m3-svg-icon > text.m3-size-48px {
   font-size: 48px;
   line-height: 48px; }
 svg.m3.m3-svg-icon > text.m3-Outlined {
-  font-family: Material-Symbols-Outlined-Regular; }
+  font-family: Material-Symbols-Rounded-Regular; }
 svg.m3.m3-svg-icon > text.m3-Rounded {
   font-family: Material-Symbols-Rounded-Regular; }
 svg.m3.m3-svg-icon > text.m3-Sharp {

src/styles/input-styles/slider.sass

@@ -19,13 +19,32 @@
     background: var(--md-sys-color-primary)
     transition: .2s cubic-bezier(0.2, 0, 0, 1)
 
-
-
 div.m3.m3-slider-container
     height: 20px
     display: flex
     align-items: center
 
+    div.m3.m3-slider-label
+        @include center(inline-flex)
+        position: absolute
+        pointer-events: none
+
+        &::before
+            content: ""
+            width: 28px
+            rotate: 45deg
+            aspect-ratio: 1
+            position: absolute
+            border-radius: 14px 14px 0 14px
+            background-color: var(--md-sys-color-primary)
+
+        & > label.m3.m3-typography
+            display: inline
+            font-weight: 500
+            position: absolute
+            font-size: 12px !important
+            color: var(--md-sys-color-on-primary)
+
     & > datalist
         display: none