resolve conflicts

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

@@ -1,20 +1,18 @@
 div.m3.m3-segmented-buttons
     padding: 0
     height: 40px
-    display: flex
-    flex-direction: row
+    display: inline-flex
     border-radius: 20px
     box-sizing: border-box
-    border-collapse: collapse
 
     & > button.m3.m3-button-segment
+        width: auto
         height: 40px
-        display: flex
+        padding: 10px
         min-width: 108px
         border-radius: 0
-        width: max-content
-        padding-inline: 10px
-        margin: 0 -0.5px 0 -0.5px
+        margin: 0 -0.5px
+        display: inline-flex
         background-color: transparent
         border: 1px solid var(--md-sys-color-outline)
 
@@ -46,9 +44,9 @@ div.m3.m3-segmented-buttons
                     fill: var(--md-sys-color-on-secondary-container)
 
         & > span.m3.m3-button-segment-state-layer
-            position: absolute
             width: 100%
             height: 100%
+            position: absolute
 
         & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
             transition: .2s cubic-bezier(0.2, 0, 0, 1)

src/styles/fonts.sass

@@ -10,7 +10,7 @@ $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700
 
 @each $name, $weight in $weights
     @font-face
-        font-family: Roboto
+        font-family: Roboto, system-ui
         font-face-name: #{$name}
         font-weight: #{$weight}
         src: url("./font/Roboto-#{$name}.ttf")

src/styles/generics.css

@@ -73,8 +73,9 @@ div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
 }
 
 svg.m3.m3-svg-icon > text {
-  alignment-baseline: central;
   text-anchor: middle;
+  dominant-baseline: middle;
+  alignment-baseline: middle;
 }
 svg.m3.m3-svg-icon > text.m3-size-12px {
   width: 12px;
@@ -186,37 +187,37 @@ svg.m3.m3-badge > text {
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Thin;
   font-weight: 100;
   src: url("./font/Roboto-Thin.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Light;
   font-weight: 300;
   src: url("./font/Roboto-Light.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Regular;
   font-weight: 400;
   src: url("./font/Roboto-Regular.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Medium;
   font-weight: 500;
   src: url("./font/Roboto-Medium.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Bold;
   font-weight: 700;
   src: url("./font/Roboto-Bold.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Black;
   font-weight: 900;
   src: url("./font/Roboto-Black.ttf");
@@ -721,20 +722,18 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
 div.m3.m3-segmented-buttons {
   padding: 0;
   height: 40px;
-  display: flex;
-  flex-direction: row;
+  display: inline-flex;
   border-radius: 20px;
   box-sizing: border-box;
-  border-collapse: collapse;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  width: auto;
   height: 40px;
-  display: flex;
+  padding: 10px;
   min-width: 108px;
   border-radius: 0;
-  width: max-content;
-  padding-inline: 10px;
-  margin: 0 -0.5px 0 -0.5px;
+  margin: 0 -0.5px;
+  display: inline-flex;
   background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
@@ -766,9 +765,9 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text
   fill: var(--md-sys-color-on-secondary-container);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
-  position: absolute;
   width: 100%;
   height: 100%;
+  position: absolute;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
   transition: 0.2s cubic-bezier(0.2, 0, 0, 1);

src/styles/icon.sass

@@ -3,8 +3,9 @@ svg.m3.m3-svg-icon
     $types: ["Outlined", "Rounded", "Sharp"]
 
     & > text
-        alignment-baseline: central
         text-anchor: middle
+        dominant-baseline: middle
+        alignment-baseline: middle
 
     @each $size in $sizes
         & > text.m3-size-#{$size}