fix: text input field bounds

Components/CustomTextField.qml

@@ -21,8 +21,6 @@ TextFieldBase {
 	property bool isError
 	property string leadingIcon
 	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
-	readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.extraSmall * 2
-	property real outlineGapScale: activeFocus || text ? 1 : 0
 	property int radius: Appearance.rounding.small
 	readonly property real smallFontScale: smallFontSize / font.pointSize
 	property int smallFontSize: Appearance.font.size.small
@@ -57,11 +55,6 @@ TextFieldBase {
 			onClicked: root.focus = true
 		}
 	}
-	Behavior on outlineGapScale {
-		Anim {
-			type: Anim.DefaultEffects
-		}
-	}
 
 	onEditingFinished: {
 		if (!valid)
@@ -103,7 +96,7 @@ TextFieldBase {
 					when: root.type === CustomTextField.Outlined && (root.activeFocus || root.text)
 
 					PropertyChanges {
-						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding + -Appearance.spacing.extraSmall
+						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding
 						placeholder.scale: root.smallFontScale
 					}
 
@@ -136,7 +129,7 @@ TextFieldBase {
 
 				AnchorAnim {
 					duration: Appearance.anim.durations.expressiveEffects
-					easing: Appearance.anim.curves.expressiveDefaultEffects
+					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
 				}
 			}
 		}
@@ -146,12 +139,11 @@ TextFieldBase {
 
 			active: root.leadingIcon
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.larger
+			anchors.leftMargin: Appearance.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
 				text: root.leadingIcon
 			}
 		}
@@ -161,12 +153,11 @@ TextFieldBase {
 
 			active: root.trailingIcon
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.larger
+			anchors.rightMargin: Appearance.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
 				text: root.trailingIcon
 			}
 		}
@@ -201,12 +192,24 @@ TextFieldBase {
 			preferredRendererType: Shape.CurveRenderer
 
 			ShapePath {
+				id: path
+
+				readonly property real inset: strokeWidth / 2
+				readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.small * 2
+				property real outlineGapScale: root.activeFocus || root.text ? 1 : 0
+
 				capStyle: ShapePath.RoundCap
 				fillColor: "transparent"
-				startX: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2 + root.outlineGap * root.outlineGapScale
+				startX: path.inset + root.horizontalPadding - root.clampedRadius + path.outlineGap * (1 - path.outlineGapScale) / 2 + path.outlineGap * path.outlineGapScale
+				startY: path.inset
 				strokeColor: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
 				strokeWidth: root.activeFocus ? 2 : 1
 
+				Behavior on outlineGapScale {
+					Anim {
+						type: Anim.DefaultEffects
+					}
+				}
 				Behavior on strokeColor {
 					CAnim {
 					}
@@ -217,54 +220,56 @@ TextFieldBase {
 				}
 
 				PathLine {
-					x: bg.width - root.clampedRadius
+					x: bg.width - path.inset - root.clampedRadius
+					y: path.inset
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: bg.width
+					x: bg.width - path.inset
-					y: root.clampedRadius
+					y: path.inset + root.clampedRadius
 				}
 
 				PathLine {
-					x: bg.width
+					x: bg.width - path.inset
-					y: bg.height - root.clampedRadius
+					y: bg.height - path.inset - root.clampedRadius
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: bg.width - root.clampedRadius
+					x: bg.width - path.inset - root.clampedRadius
-					y: bg.height
+					y: bg.height - path.inset
 				}
 
 				PathLine {
-					x: root.clampedRadius
+					x: path.inset + root.clampedRadius
-					y: bg.height
+					y: bg.height - path.inset
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: 0
+					x: path.inset
-					y: bg.height - root.clampedRadius
+					y: bg.height - path.inset - root.clampedRadius
 				}
 
 				PathLine {
-					x: 0
+					x: path.inset
-					y: root.clampedRadius
+					y: path.inset + root.clampedRadius
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: root.clampedRadius
+					x: path.inset + root.clampedRadius
-					y: 0
+					y: path.inset
 				}
 
 				PathLine {
-					x: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2
+					x: path.inset + root.horizontalPadding - root.clampedRadius / 2 + path.outlineGap * (1 - path.outlineGapScale) / 2
+					y: path.inset
 				}
 			}
 		}