@@ -103,12 +103,13 @@ labelLarge { left, width, top } =
103103 , padding: _0
104104 , whiteSpace: nowrap -- force on one line
105105 , overflow: str "hidden"
106+ , height: str "calc(var(--s0) * 0.95)"
106107 , maxWidth: str $ i width "px"
107108 , textOverflow: str "ellipsis"
108109 , marginTop: str "calc(var(--s-1) + var(--s-5))"
109110 , marginBottom: str $ i "calc(" "var(--s-1)" "+" "var(--s-5)" " + " top "px" ")"
110111 , marginLeft: str $ i left "px"
111− , marginRight: str "var(--input-side-padding)"
112+ , marginRight: var "--input-side-padding"
112113 , color: str colour.placeholderText
113114 , fontWeight: str "400"
114115 , """&[data-required="true"]:after""":
@@ -117,6 +118,7 @@ labelLarge { left, width, top } =
117118 , color: str colour.required
118119 , fontFamily: str "Helvetica, Arial, Inter, sans-serif"
119120 , fontSize: str "calc(var(--s0))"
121+ , lineHeight: str "calc(var(--s0) * 0.85)"
120122 }
121123 }
122124
@@ -166,16 +168,7 @@ inputContainer props = theCss <>? props.css
166168 , "--input-side-padding": var "--s-1"
167169 , "--input-top-padding": var "--s-5"
168170 , "--input-bottom-padding": var "--s-5"
169− , alignItems: center
170− , justifyContent: center
171− , paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"
172− , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"
173− , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"
174− , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"
175− , gap: str "calc(var(--input-side-padding) / 2)"
176171 , "--border-width": str "1px"
177− , border: str $ "var(--border-width) solid " <> colour.inputBorder
178− , borderRadius: var "--input-border-radius"
179172 , """&[data-invalid="false"]""":
180173 nest
181174 { borderColor: str colour.success
@@ -192,6 +185,16 @@ inputContainer props = theCss <>? props.css
192185 , borderColor: str colour.highlight
193186 , transition: str "border-color 0s linear 0.1s"
194187 }
188+ , alignItems: center
189+ , justifyContent: center
190+ , border: str $ "var(--border-width) solid " <> colour.inputBorder
191+ , paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"
192+ , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"
193+ , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"
194+ , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"
195+ , height: str "calc(var(--s2) * 0.9)"
196+ , gap: str "calc(var(--input-side-padding) / 2)"
197+ , borderRadius: var "--input-border-radius"
195198 }
196199
197200inputWrapper ∷ Style