From 758e61581ef30481e5dd8c1bd7707db2a2988ab8 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Tue, 5 Mar 2024 13:23:26 -0800
Subject: [PATCH] fix(button,fab,chips,labs): text-transform inherits through
 shadow root

PiperOrigin-RevId: 612948745
---
 button/internal/_shared.scss                     | 2 ++
 chips/internal/_shared.scss                      | 6 ++++++
 fab/internal/_shared.scss                        | 2 ++
 labs/navigationtab/internal/_navigation-tab.scss | 2 ++
 labs/segmentedbutton/internal/_shared.scss       | 2 ++
 5 files changed, 14 insertions(+)

diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
index f1c31e8918..40e6b88899 100644
--- a/button/internal/_shared.scss
+++ b/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;
diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
index df0f56a7c0..54d95949b3 100644
--- a/chips/internal/_shared.scss
+++ b/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;
diff --git a/fab/internal/_shared.scss b/fab/internal/_shared.scss
index dd4542052b..b746f6fd5b 100644
--- a/fab/internal/_shared.scss
+++ b/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;
diff --git a/labs/navigationtab/internal/_navigation-tab.scss b/labs/navigationtab/internal/_navigation-tab.scss
index 7e9734b1bd..cb477a41dd 100644
--- a/labs/navigationtab/internal/_navigation-tab.scss
+++ b/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 {
diff --git a/labs/segmentedbutton/internal/_shared.scss b/labs/segmentedbutton/internal/_shared.scss
index 8d2905d8bb..6502ee15ac 100644
--- a/labs/segmentedbutton/internal/_shared.scss
+++ b/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);