fix: <Field variant="toggle"> transition

split `--default-transition` into `--default-transition-duration` & `--default-transition-easing`

README.md

@@ -60,8 +60,9 @@ css var | purpose
 `--default-border-radius` | field corner rounding
 `--default-boxshadow` | drop shadow on buttons and fields
 `--default-padding` | inner spacing of fields and minimum inner spacing for buttons
-`--default-transition` | css transitions applied to changes on buttons and fields
-`--grid-gutter` | space between css grid layout cells (labels + fields, fields + fields)
+`--default-transition-duration` | value used for [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) on various Fields
+`--default-transition-easing` | value used for [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) on various Fields
+`--grid-gutter` | space between css grid layout cells (labels + fields, fields + fields); value used for [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
 
 Labels of fields set to required are automatically styled with an "*" in an accessibility-friendly way.
 

lib/react/Field/Field.module.css

@@ -239,7 +239,8 @@ textarea.Field {
 	transition-property:
 		background-color,
 		translate;
-	transition-duration: var(--default-transition);
+	transition-duration: var(--default-transition-duration);
+	transition-timing-function: var(--default-transition-easing);
 	translate: calc(-50% + 1px);
 	width: 50%;
 }
@@ -289,7 +290,7 @@ textarea.Field {
 	pointer-events: none;
 	position: absolute;
 	top: 0;
-	transition: opacity var(--default-transition);
+	transition: opacity var(--default-transition-duration) var(--default-transition-easing);
 	translate: 0 calc(-100% - 1em);
 	width: max-content;
 	z-index: 1;