Animate block dialog

src/ui/component/core/Block.ts

@@ -17,7 +17,7 @@ interface BlockTypeManipulator<HOST> {
 	remove (...buttonTypes: BlockType[]): HOST
 }
 
-interface BlockExtensions {
+export interface BlockExtensions {
 	readonly header: Component
 	readonly title: Heading
 	readonly primaryActions: Component

src/ui/component/core/BlockDialog.ts

@@ -1,6 +1,10 @@
 import Component from "ui/Component"
+import type { BlockExtensions } from "ui/component/core/Block"
 import Block from "ui/component/core/Block"
+import type { DialogExtensions } from "ui/component/core/Dialog"
 import Dialog from "ui/component/core/Dialog"
+import type { CanHasActionsMenuButtonExtensions } from "ui/component/core/ext/CanHasActionsMenuButton"
+import Task from "utility/Task"
 
 interface BlockDialogExtensions {
 }
@@ -9,9 +13,38 @@ interface BlockDialog extends Dialog, Block, BlockDialogExtensions { }
 
 const BlockDialog = Component.Builder((component): BlockDialog => {
 	const dialog = component.and(Dialog).and(Block)
+		.viewTransition()
+		.style.remove("block")
+	dialog
+		.style("dialog-block-wrapper")
+		.style.bind(dialog.opened.not, "dialog-block-wrapper--closed")
+
+	const block = Block()
 		.style("dialog-block")
+		.style.bind(dialog.opened.not, "dialog-block--closed")
+		.appendTo(dialog)
+	dialog
+		.extend<Partial<BlockExtensions & CanHasActionsMenuButtonExtensions>>(dialog => ({
+			type: block.type,
+			content: block.content,
+			setActionsMenu: block.setActionsMenu,
+		}))
+		.extendJIT("header", () => block.header)
+		.extendJIT("title", () => block.title)
+		.extendJIT("primaryActions", () => block.primaryActions)
+		.extendJIT("description", () => block.description)
+		.extendJIT("footer", () => block.footer)
+		.extendJIT("actionsMenuButton", () => block.actionsMenuButton)
 
-	return dialog.extend<BlockDialogExtensions>(dialog => ({}))
+	const superOpen = dialog.open
+	return dialog.extend<BlockDialogExtensions & Partial<DialogExtensions>>(dialog => ({
+		open () {
+			superOpen()
+			block.style("dialog-block--opening")
+			void Task.yield().then(() => block.style.remove("dialog-block--opening"))
+			return dialog
+		},
+	}))
 })
 
 export default BlockDialog

src/ui/component/core/ConfirmDialog.ts

@@ -66,7 +66,9 @@ const ConfirmDialog = Object.assign(
 		prompt: (owner: Component, definition?: ConfirmDialogDefinition): Promise<boolean> =>
 			ConfirmDialog(definition)
 				.appendTo(document.body)
-				.event.subscribe("close", event => event.component.remove())
+				.event.subscribe("close", event =>
+					event.component.event.subscribe("transitionend", event =>
+						event.component.remove()))
 				.await(owner),
 	},
 )

style/component/core/dialog.chiri

@@ -20,8 +20,30 @@
 		z-index: 999999999
 
 	&-block:
-		%margin-auto
+		&-wrapper:
+			%overflow-visible
+			%margin-auto
+			#transition: #{transition("display")}, #{transition("overlay")}
+			%transition-discrete
 
-		@backdrop:
-			%background-dark-3-a80
-			%backdrop-blur
+			@backdrop:
+				background: color-mix(in lch, #{background-highlight}, transparent 5%)
+				%backdrop-blur
+
+				#transition: #{transition("display")}, #{transition("background")}, #{transition("backdrop-filter")}
+
+			&--closed:
+				@backdrop:
+					%background-none
+					%backdrop-filter-none
+
+		#transition: #{transition("opacity")}, #{transition("translate")}
+
+		&--closed:
+			%translate-down-5
+			%transparent
+
+		&--opening:
+			%translate-up-4
+			%transparent
+			%transition-none

style/root.chiri

@@ -1,6 +1,6 @@
 #macro tablet:
 	#body!component content
-	:container root (width < calc(#{space-5} * 20)):
+	:container root (width < calc($space-5 * 20)):
 		#include content
 
 colour-scheme: dark

style/var/number.chiri

@@ -1 +1 @@
-#string content-width = "calc(#{space-5} * 13)
+#string content-width = "calc($space-5 * 13)