fix(button,fab,chips,labs): text-transform inherits through shadow root

PiperOrigin-RevId: 612948745

Author: Elliott Marquez

button/internal/_shared.scss

@@ -99,6 +99,8 @@
     color: var(--_label-text-color);
     padding: 0;
     gap: inherit;
+    // Override the user-agent text-transform: none of <button> and <a>
+    text-transform: inherit;
 
     &::-moz-focus-inner {
       padding: 0;

chips/internal/_shared.scss

@@ -222,6 +222,12 @@
     }
   }
 
+  a,
+  button {
+    // Override the user-agent text-transform: none of <button> and <a>
+    text-transform: inherit;
+  }
+
   a,
   button:not(:disabled) {
     cursor: inherit;

fab/internal/_shared.scss

@@ -55,6 +55,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     outline: none;
     // Required for elevation and ripple to stay below content
     z-index: 0;
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
 
     &.extended {
       width: inherit;

labs/navigationtab/internal/_navigation-tab.scss

@@ -76,6 +76,8 @@ $animation-duration: 100ms;
     font-size: var(--_label-text-size);
     line-height: var(--_label-text-line-height);
     font-weight: var(--_label-text-weight);
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
 
     // Firefox draws a dotted border around focused buttons unless specifically overridden.
     &::-moz-focus-inner {

labs/segmentedbutton/internal/_shared.scss

@@ -61,6 +61,8 @@
     vertical-align: middle;
     padding-inline-start: var(--_spacing-leading);
     padding-inline-end: var(--_spacing-trailing);
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
 
     .md3-segmented-button__outline {
       border-color: var(--_outline-color);