Make clicking the submit button when it's disabled actually report th…

…e issues

src/ui/component/core/Form.ts

@@ -12,15 +12,16 @@ interface FormExtensions {
 
 interface Form extends Component, FormExtensions { }
 
-const Form = Component.Builder((form, label: Component): Form => {
-	form.replaceElement('form')
+const Form = Component.Builder((component, label: Component): Form => {
+	const form = (component.replaceElement('form')
 		.style('form')
 		.ariaRole('form')
 		.ariaLabelledBy(label)
+	) as Component<HTMLFormElement>
 
 	form.receiveDescendantInsertEvents()
 
-	const valid = State.Generator(() => (form.element as HTMLFormElement).checkValidity())
+	const valid = State.Generator(() => (form.element).checkValidity())
 	form.event.subscribe(['input', 'change', 'descendantInsert'], () => valid.refresh())
 
 	const content = (form.is(Block) ? form.content : Component())
@@ -29,6 +30,8 @@ const Form = Component.Builder((form, label: Component): Form => {
 	const footer = (form.is(Block) ? form.footer : ActionRow())
 		.style('form-footer')
 
+	let submitButtonWrapper: Component | undefined
+
 	return form
 		.append(content, footer)
 		.extend<FormExtensions>(() => ({
@@ -39,7 +42,16 @@ const Form = Component.Builder((form, label: Component): Form => {
 			.type('primary')
 			.attributes.set('type', 'submit')
 			.bindDisabled(valid.not, 'invalid')
-			.appendTo(footer.right))
+			.appendTo(submitButtonWrapper ??= Component()
+				.event.subscribe('click', () => {
+					if (!form.element.checkValidity())
+						form.element.reportValidity()
+				})
+				.appendTo(footer.right))
+			.tweak(submitButton => submitButton
+				.style.bind(State.Every(form, submitButtonWrapper!.hovered, submitButton.disabled), 'button--disabled--hover')
+				.style.bind(State.Every(form, submitButtonWrapper!.active, submitButton.disabled), 'button--disabled--active')
+			))
 })
 
 export default Form

style/component/core/button.chiri

@@ -77,11 +77,22 @@ $$button-background-highlight!colour
 		%box-shadow-none
 		%opacity-30
 		%cursor-default
+		%pointer-events-none
 
 		::hover, ::focus, ::active:
 			%translate-y-0
 			%box-shadow-none
 
+		&--hover:
+			#after: .button, .button--disabled
+			$button-background: $background-interact-5
+			$transition-duration: $transition-focus
+
+		&--active:
+			#after: .button, .button--disabled, .button--disabled--hover
+			%box-shadow-inset-1
+			$transition-duration: $transition-action
+
 	#list!string icons = [
 		"plus
 		"ellipsis-vertical