[Bug Report][3.9.4] Bug report about MD3 blueprint text-transform

[OttoDoorenbos]

Environment

Vuetify Version: 3.9.4
Vue Version: 3.5.18
OS: Windows 10 (current)

Steps to reproduce

1. Create Vuetify project with MD3 blueprint
2. Add any button: Button
3. Observe text displays as "BUTTON" instead of "Button"
4. Inspect element - shows text-transform: uppercase

Expected Behavior

MD3 Blueprint incorrectly applies text-transform: uppercase to buttons, violating Material Design 3 guidelines

Actual Behavior

Button text is transformed to uppercase, displaying as "BUTTON" due to CSS rule text-transform: uppercase being applied by MD3 blueprint.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

This violates Material Design 3 specifications. MD3 moved away from uppercase button text used in MD1/MD2. Reference: https://m3.material.io/components/buttons/specs

Images

[J-Sek]

Workaround

import { createVuetify } from 'vuetify'
import { md3 } from 'vuetify/blueprints'

export const vuetify = createVuetify({
  defaults: {
    ...md3.defaults,
    VBtn: {
      style: 'text-transform: none; letter-spacing: .0625em; font-weight: 500',
    }
  },
})

[OttoDoorenbos]

There is also padding

style: 'text-transform: none; letter-spacing: .0625em; font-weight: 500; padding: 0 16px;',

[J-Sek]

Padding, sizes, font sizes, letter spacing... tons of things, yes.
I was experimenting a bit here: #21831

The main concern is that new defaults are going to break many existing apps.

[OttoDoorenbos]

@J-Sek First off, thanks for all the effort you’ve been putting into this — it’s clear how much work has gone into making the transition smoother for everyone. 🙌

Just sharing my thoughts here: when a developer explicitly opts into blueprint: md3, I feel like full MD3 compliance should take priority.

Choosing blueprint: md3 is a conscious decision to adopt the new design system, and most of us understand that MD3 brings changes in spacing, typography, and component specs compared to MD2. In that case, providing a fully MD3-compliant experience would:

1. Set clear expectations – blueprint: md3 means real MD3, no ambiguity.
2. Avoid a drawn-out transition – better to switch cleanly once, rather than incrementally.
3. Respect developer intent – if we’ve opted in, we’re ready for the changes.

Right now, the partial MD3 implementation can feel a little confusing — devs who want full MD3 compliance often end up manually overriding basics like button text transform or padding. Those who prefer a slower migration path can still stick with the MD2 blueprint, which is great.

TL;DR: Just my two cents — when blueprint: md3 is set, it would be awesome if the implementation matched the official Material 3 specs as closely as possible. That way, devs opting in know they’re getting the full MD3 experience without extra tweaks.

Again, huge respect for all the work being done here 🙏

[J-Sek]

For the most part I agree. But there is a bit of load in the "full MD3 experience". It should probably include updated "squiggly" progress bar, new slider, and the elevation overhaul. Buttons are just the most jarring thing missing at the moment. If we can scope it to MD3 somehow (and avoid regression for anyone not using blueprint). I will get back to the topic after pushing some outstanding PRs that are almost ready. If you want, you can try out the draft PR and list out the missing pieces as actionable todo-list :)

[OttoDoorenbos]

Are you referring to this #21831 ?

[J-Sek]

I just got the very basic use-case done. Each size variant is controlled by 3 properties.

• we are missing icon size and internal spacing
• defaults (blueprint) do not let you control those individually - it assumes a single size variant. Current workaround would be to have aliases - not viable. It is the most important roadblock
• should the implementation take the density prop into consideration?

[OttoDoorenbos]

Yes, density in MD3 aligns with Vuetify density.

https://m3.material.io/foundations/layout/understanding-layout/density