Vuetify v4

.gitignore

@@ -14,7 +14,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
 .history/*
 /.claude
 !.vscode/extensions.json

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+	"explorer.fileNesting.enabled": true,
+	"explorer.fileNesting.patterns": {
+		"*.ts": "${capture}.js, ${capture}.js.map, ${capture}.d.ts",
+		".env": ".env.*, .envrc",
+		".prettierrc": ".prettierrc.*, .prettier*",
+		"composer.json": "composer.lock, phpunit.xml*, .php-cs-fixer*, phpstan*",
+		"eslint.config.mjs": ".eslintrc-auto-import.json, .prettierrc.*, .prettier*",
+		"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, .npmrc, .nvmrc, .node-version",
+		"stylelint.config.js": "postcss.config.js",
+		"tsconfig.json": "tsconfig.*.json",
+		"vite.config.mts": "vite.build.config.mts",
+	}
+}

cypress/plugins/index.ts

@@ -1,7 +1,7 @@
 const path = require('path');
 const { startDevServer } = require('@cypress/vite-dev-server');
 
-module.exports = (on, config) => {
+module.exports = (_on, config) => {
 	config.env.tsconfigPath = path.resolve(__dirname, '../../tsconfig.cypress.json'); // Adjust the path as needed
 	return config;
 };

src/plugin/components/fields/VSFButtonField/VSFButtonField.vue

@@ -53,6 +53,7 @@
 							<span
 								class="vsf-button-field__btn-label"
 								:class="getLabelClass(option)"
+								:style="getLabelStyle(option)"
 								v-html="option.label"
 							></span>
 						</template>
@@ -398,9 +399,6 @@ const itemGroupStyle = computed<CSSProperties>(() => {
 });
 
 
-const buttontextcolor = ref('rgb(var(--v-theme-on-surface))');
-
-
 // -------------------------------------------------- Classes //
 const itemGroupClass = computed(() => {
 	return {
@@ -441,13 +439,38 @@ const buttonClassAdditional = (option: Option) => {
 	};
 };
 
+const getLabelStyle = (option: Option): CSSProperties => {
+	const optionVariant = getVariant(option.value);
+	const useBgColor = isActive(option.value) || optionVariant === 'flat' || optionVariant === 'elevated';
+
+	// When the button shows a background color, let Vuetify's `bg-<color>`
+	// contrast color drive the label text so a selected button gets the correct
+	// on-color (e.g. black on a light color). Only the neutral, un-selected
+	// state forces `on-surface` for readability.
+	if (useBgColor) {
+		return {};
+	}
+
+	return {
+		color: 'rgb(var(--v-theme-on-surface))',
+	};
+};
+
 const getLabelClass = (option: Option): object => {
 	const isActiveOption = isActive(option.value);
 	const optionVariant = getVariant(option.value);
 	const useBgColor = isActiveOption || optionVariant === 'flat' || optionVariant === 'elevated';
+	const bgColor = option?.color ?? field.value?.color;
 
 	return {
-		[`bg-${option?.color}`]: useBgColor,
+		// The field/option `class` is applied to the label itself. A
+		// text-transform utility set directly on the label wins over the value
+		// it would otherwise inherit from the button (e.g. a global `VBtn`
+		// `text-uppercase` default), so the app default is respected when no
+		// class is set but can be altered per-field/option when one is.
+		[`bg-${bgColor}`]: useBgColor && bgColor != null,
+		[`${field.value?.class}`]: field.value?.class != null,
+		[`${option?.class}`]: option?.class != null,
 	};
 };
 
@@ -470,10 +493,4 @@ function containsSizeUnit(value: string | number): boolean {
 .v-item-group {
 	flex-wrap: wrap;
 }
-
-.vsf-button-field {
-	&__btn-label {
-		color: v-bind(buttontextcolor);
-	}
-}
 </style>

src/shims-vue.d.ts

@@ -1 +1,7 @@
 declare module '*.vue';
+
+// Vuetify only exposes `vuetify/styles`' type declarations via its package
+// `exports` map, which the classic `node` module resolution used by this
+// project cannot read. The import is a CSS side-effect with no meaningful
+// types, so declare it ambiently to satisfy the side-effect import.
+declare module 'vuetify/styles';

tsconfig.app.json

@@ -1,7 +1,6 @@
 {
 	"compilerOptions": {
 		"allowSyntheticDefaultImports": true,
-		"baseUrl": "./",
 		"composite": true,
 		"declaration": true,
 		"declarationDir": "./dist",
@@ -86,7 +85,6 @@
 		"src/**/__tests__/*",
 		"playground",
 		"src/playground/configs/templates/PlaygroundPage.vue",
-		"src/plugins/**/*.ts",
 		"src/stores/**/*.ts"
 	],
 }

tsconfig.cypress.json

@@ -8,7 +8,8 @@
 			"./node_modules/@types"
 		],
 		"types": [
-			"cypress-real-events",
+			"cypress",
+			"node",
 		]
 	},
 	"exclude": [],
@@ -19,6 +20,7 @@
 		"cypress/support/commands.ts",
 		"cypress/support/component.*",
 		"vite.cypress.config.ts",
+		"package.json",
 		"src/**/*",
 		"src/**/*.vue",
 		"src/**/__tests__/*"