ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons

src/styles/input-styles/checkbox.sass

@@ -13,16 +13,15 @@ div.m3.m3-checkbox-container
         position: absolute
 
 input[type="checkbox"].m3.m3-checkbox
+    @include center(flex)
+
     z-index: 10
-    display: flex
     width: 1.125rem
     height: 1.125rem
     appearance: none
     position: absolute
-    align-items: center
     border-radius: .14rem
     box-sizing: content-box
-    justify-content: center
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     & ~ span.m3-checkbox-state
@@ -54,14 +53,13 @@ input[type="checkbox"].m3.m3-checkbox
             opacity: 38%
 
     & ~ span.m3-checkbox-state
+        @include center(flex)
+
         z-index: 10
-        display: flex
         font-size: 24px
         font-weight: 700
         line-height: 24px
-        align-items: center
         pointer-events: none
-        justify-content: center
         font-family: Material-Symbols-Outlined-Regular, sans-serif
         font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
 

src/styles/input-styles/radio.sass

@@ -1,9 +1,8 @@
 div.m3.m3-radio-container
+    @include center(inline-flex)
+
     width: 20px
     height: 20px
-    align-items: center
-    display: inline-flex
-    justify-content: center
 
     & + label.m3.m3-radio-label
         margin-inline: 3px

src/styles/input-styles/slider.sass

@@ -37,11 +37,11 @@ input[type="range"].m3.m3-slider
     background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
 
     &::-webkit-slider-container
+        height: 4px
         appearance: none
         box-shadow: none
         border-radius: 2px
         min-block-size: 4px
-        height: 4px !important
 
     &::-webkit-slider-runnable-track
         height: 4px

src/styles/input-styles/text-field.sass

@@ -1,3 +1,9 @@
+@mixin m3-text-field-fieldset-legend
+    border-top-width: 0
+    border-style: solid
+    border-bottom-width: 0
+    border-color: transparent
+
 div.m3.m3-text-field
     margin: 0
     display: flex
@@ -173,17 +179,13 @@ div.m3.m3-text-field
             border: 3px solid var(--md-sys-color-primary)
 
         &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
-            border-top-width: 0
-            border-style: solid
-            border-bottom-width: 0
-            border-color: transparent
+            @include m3-text-field-fieldset-legend
+
             border-inline-width: 5.5px
 
         &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
-            border-top-width: 0
-            border-style: solid
-            border-bottom-width: 0
-            border-color: transparent
+            @include m3-text-field-fieldset-legend
+
             border-inline-width: 7.5px
 
         & > input:focus-visible + label