port new components to greeter

Greeter/Components/Anim.qml

@@ -2,7 +2,62 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	duration: MaterialEasing.standardTime
-	easing.bezierCurve: MaterialEasing.standard
-	easing.type: Easing.BezierSpline
+	enum Type {
+		StandardSmall = 0,
+		Standard,
+		StandardLarge,
+		StandardExtraLarge,
+		EmphasizedSmall,
+		Emphasized,
+		EmphasizedLarge,
+		EmphasizedExtraLarge,
+		FastSpatial,
+		DefaultSpatial,
+		SlowSpatial,
+		FastEffects,
+		DefaultEffects,
+		SlowEffects
+	}
+
+	property int type: Anim.DefaultSpatial
+
+	duration: {
+		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
+			return Appearance.anim.durations.normal;
+
+		if (type === Anim.FastSpatial)
+			return Appearance.anim.durations.expressiveFastSpatial;
+		if (type === Anim.DefaultSpatial)
+			return Appearance.anim.durations.expressiveDefaultSpatial;
+		if (type === Anim.SlowSpatial)
+			return Appearance.anim.durations.large;
+		if (type === Anim.FastEffects)
+			return Appearance.anim.durations.expressiveFastEffects;
+		if (type === Anim.DefaultEffects)
+			return Appearance.anim.durations.expressiveEffects;
+		if (type === Anim.SlowEffects)
+			return Appearance.anim.durations.expressiveSlowEffects;
+
+		const types = ["small", "normal", "large", "extraLarge"];
+		const idx = type % 4; // 0-7 are the 4 standard types
+		return Appearance.anim.durations[types[idx]];
+	}
+	easing.bezierCurve: {
+		if (type === Anim.FastSpatial)
+			return Appearance.anim.curves.expressiveFastSpatial;
+		if (type === Anim.DefaultSpatial)
+			return Appearance.anim.curves.expressiveDefaultSpatial;
+		if (type === Anim.SlowSpatial)
+			return Appearance.anim.curves.expressiveSlowSpatial;
+		if (type === Anim.FastEffects)
+			return Appearance.anim.curves.expressiveFastEffects;
+		if (type === Anim.DefaultEffects)
+			return Appearance.anim.curves.expressiveDefaultEffects;
+		if (type === Anim.SlowEffects)
+			return Appearance.anim.curves.expressiveSlowEffects;
+
+		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
+			return Appearance.anim.curves.emphasized;
+		return Appearance.anim.curves.standard;
+	}
 }

Greeter/Components/CollapsibleSection.qml

@@ -59,15 +59,15 @@ ColumnLayout {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				root.toggleRequested();
-				root.expanded = !root.expanded;
-			}
-
 			anchors.fill: parent
 			color: DynamicColors.palette.m3onSurface
 			radius: Appearance.rounding.normal
 			showHoverBackground: false
+
+			onClicked: {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
 		}
 	}
 

Greeter/Components/CustomButton.qml

@@ -23,10 +23,10 @@ Button {
 	}
 
 	StateLayer {
-		function onClicked(): void {
+		radius: control.radius
+
+		onClicked: {
 			control.clicked();
 		}
-
-		radius: control.radius
 	}
 }

Greeter/Components/CustomRadioButton.qml

@@ -33,13 +33,13 @@ RadioButton {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				root.click();
-			}
-
 			anchors.margins: -7
 			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
 			z: -1
+
+			onClicked: {
+				root.click();
+			}
 		}
 
 		CustomRect {

Greeter/Components/CustomSlider.qml

@@ -1,45 +1,174 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
+import ZShell.Components
+import ZShell
+import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	background: Item {
+	property bool animateWave
+	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property real filledWidth
+	property real pos: visualPosition
+	property int waveDuration: 1000
+	property real waveFrequency: 6
+	property bool wavy
+
+	signal interaction(v: real)
+
+	implicitHeight: 12
+	implicitWidth: 200
+
+	contentItem: Item {
+		anchors.fill: parent
+
 		CustomRect {
-			anchors.bottom: parent.bottom
-			anchors.left: parent.left
-			anchors.top: parent.top
-			bottomRightRadius: root.implicitHeight / 6
-			color: DynamicColors.palette.m3primary
-			implicitWidth: root.handle.x - root.implicitHeight / 2
-			radius: Appearance.rounding.full
-			topRightRadius: root.implicitHeight / 6
+			id: remaining
+
+			anchors.left: handle.right
+			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			bottomLeftRadius: Appearance.rounding.extraSmall / 2
+			color: root.bgColor
+			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
+			opacity: Math.min(width, 12) / 12
+			radius: Appearance.rounding.small
+			topLeftRadius: Appearance.rounding.extraSmall / 2
 		}
 
 		CustomRect {
-			anchors.bottom: parent.bottom
 			anchors.right: parent.right
-			anchors.top: parent.top
-			bottomLeftRadius: root.implicitHeight / 6
-			color: DynamicColors.tPalette.m3surfaceContainer
-			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			anchors.rightMargin: 4 * remaining.opacity
+			anchors.verticalCenter: parent.verticalCenter
+			color: root.fgColor
+			implicitHeight: 4 * remaining.opacity
+			implicitWidth: implicitHeight
+			opacity: remaining.opacity
 			radius: Appearance.rounding.full
-			topLeftRadius: root.implicitHeight / 6
+		}
+
+		CustomRect {
+			id: handle
+
+			anchors.left: filled.right
+			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			color: root.fgColor
+			implicitHeight: {
+				const mult = parent.height <= 12 ? 3 : 1.2;
+				const pressMult = parent.height <= 12 ? 4 : 1.5;
+				return parent.height * (mouse.pressed ? pressMult : mult);
+			}
+			implicitWidth: 4
+			radius: Appearance.rounding.full
+
+			Behavior on implicitHeight {
+				Anim {
+					type: Anim.FastSpatial
+				}
+			}
+		}
+
+		Loader {
+			id: filled
+
+			anchors.left: parent.left
+			anchors.verticalCenter: parent.verticalCenter
+			asynchronous: true
+			sourceComponent: root.wavy ? waveComp : lineComp
+		}
+
+		Component {
+			id: lineComp
+
+			CustomRect {
+				bottomRightRadius: Appearance.rounding.extraSmall / 2
+				color: root.fgColor
+				implicitHeight: root.height
+				implicitWidth: root.filledWidth
+				radius: Appearance.rounding.small
+				topRightRadius: Appearance.rounding.extraSmall / 2
+			}
+		}
+
+		Component {
+			id: waveComp
+
+			WavyLine {
+				color: root.fgColor
+				frequency: root.waveFrequency
+				fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
+				implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
+				implicitWidth: root.filledWidth
+				lineWidth: root.height * 0.7
+				startX: x
+
+				Behavior on color {
+					CAnim {
+					}
+				}
+				Anim on waveProgress {
+					duration: root.waveDuration
+					easing.type: Easing.Linear
+					from: 0
+					loops: Animation.Infinite
+					paused: !root.animateWave
+					running: true
+					to: 1
+				}
+			}
 		}
 	}
-	handle: CustomRect {
-		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.palette.m3primary
-		implicitHeight: 15
-		implicitWidth: 5
-		radius: Appearance.rounding.full
-		x: root.visualPosition * root.availableWidth - implicitWidth / 2
+	Behavior on filledWidth {
+		id: widthBehavior
 
-		MouseArea {
-			acceptedButtons: Qt.NoButton
-			anchors.fill: parent
-			cursorShape: Qt.PointingHandCursor
+		Anim {
+		}
+	}
+
+	Component.onCompleted: filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos)
+
+	Binding {
+		id: posBinding
+
+		property: "pos"
+		target: root
+		value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
+		when: mouse.pressed
+	}
+
+	MouseArea {
+		id: mouse
+
+		property real dragMovement
+		property real pressStartPos
+		property real pressStartX
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		implicitHeight: handle.implicitHeight
+		preventStealing: true
+
+		onPositionChanged: e => {
+			dragMovement = (e.x - pressStartX) / width;
+			root.interaction(posBinding.value);
+		}
+		onPressed: e => {
+			widthBehavior.enabled = false;
+			pressStartX = e.x;
+			pressStartPos = root.visualPosition;
+		}
+		onReleased: e => {
+			root.interaction(posBinding.value);
+			widthBehavior.enabled = true;
+			dragMovement = 0;
 		}
 	}
 }

Greeter/Components/CustomSpinBox.qml

@@ -28,6 +28,7 @@ RowLayout {
 	CustomTextField {
 		id: textField
 
+		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
 		leftPadding: Appearance.padding.normal
@@ -36,7 +37,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -85,7 +86,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -93,7 +94,9 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				let newValue = Math.min(root.max, root.value + root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -102,9 +105,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -113,13 +113,13 @@ RowLayout {
 			id: upIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,7 +127,9 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				let newValue = Math.max(root.min, root.value - root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -136,9 +138,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -147,7 +146,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_down"
 		}
 	}

Greeter/Components/CustomSplitButton.qml

@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Config
-import qs.Helpers
 
 Row {
 	id: root
@@ -12,66 +11,46 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color colour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
 	property bool disabled
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledTextColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	readonly property alias expandBtn: expandBtn
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.normal
-	property alias iconLabel: iconLabel
-	property alias label: label
-	property alias menu: menu
+	property real horizontalPadding: Appearance.padding.larger
+	readonly property alias iconLabel: iconLabel
+	readonly property alias label: label
+	readonly property alias menu: menu
 	property alias menuItems: menu.items
 	property bool menuOnTop
-	property alias stateLayer: stateLayer
-	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	property real minLeftWidth
+	readonly property alias stateLayer: stateLayer
+	property color textColour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	readonly property alias textRow: textRow
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.smaller
+	property real verticalPadding: Appearance.padding.small
 
-	function closeDropdown(): void {
-		SettingsDropdowns.close(menu);
-	}
-
-	function openDropdown(): void {
-		if (root.disabled)
-			return;
-		SettingsDropdowns.open(menu, root);
-	}
-
-	function toggleDropdown(): void {
-		if (root.disabled)
-			return;
-		SettingsDropdowns.toggle(menu, root);
-	}
-
-	spacing: Math.floor(Appearance.spacing.small / 2)
-
-	onExpandedChanged: {
-		if (!expanded)
-			SettingsDropdowns.forget(menu);
-	}
+	spacing: Math.floor(Appearance.spacing.extraSmall)
 
 	CustomRect {
 		bottomRightRadius: Appearance.rounding.small / 2
-		color: root.disabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandBtn.implicitHeight
-		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
+		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
 		topRightRadius: Appearance.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
 
-			function onClicked(): void {
-				root.active?.clicked();
-			}
-
-			color: root.textColor
+			bottomRightRadius: parent.bottomRightRadius
+			color: root.textColour
 			disabled: root.disabled
-			rect.bottomRightRadius: parent.bottomRightRadius
-			rect.topRightRadius: parent.topRightRadius
+			topRightRadius: parent.topRightRadius
+
+			onClicked: root.active?.clicked()
 		}
 
 		RowLayout {
@@ -86,7 +65,7 @@ Row {
 
 				Layout.alignment: Qt.AlignVCenter
 				animate: true
-				color: root.disabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColour : root.textColour
 				fill: 1
 				text: root.active?.activeIcon ?? root.fallbackIcon
 			}
@@ -98,12 +77,12 @@ Row {
 				Layout.preferredWidth: implicitWidth
 				animate: true
 				clip: true
-				color: root.disabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColour : root.textColour
 				text: root.active?.activeText ?? root.fallbackText
 
 				Behavior on Layout.preferredWidth {
 					Anim {
-						easing.bezierCurve: Appearance.anim.curves.emphasized
+						type: Anim.Emphasized
 					}
 				}
 			}
@@ -116,7 +95,7 @@ Row {
 		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
 
 		bottomLeftRadius: rad
-		color: root.disabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -130,14 +109,12 @@ Row {
 		StateLayer {
 			id: expandStateLayer
 
-			function onClicked(): void {
-				root.toggleDropdown();
-			}
-
-			color: root.textColor
+			color: root.textColour
 			disabled: root.disabled
 			rect.bottomLeftRadius: parent.bottomLeftRadius
 			rect.topLeftRadius: parent.topLeftRadius
+
+			onClicked: root.expanded = !root.expanded
 		}
 
 		MaterialIcon {
@@ -145,7 +122,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: root.disabled ? root.disabledTextColor : root.textColor
+			color: root.disabled ? root.disabledTextColour : root.textColour
 			rotation: root.expanded ? 180 : 0
 			text: "expand_more"
 
@@ -158,24 +135,14 @@ Row {
 				}
 			}
 		}
+	}
 
-		Menu {
-			id: menu
+	Menu {
+		id: menu
 
-			anchors.bottomMargin: Appearance.spacing.small
-			anchors.right: parent.right
-			anchors.top: parent.bottom
-			anchors.topMargin: Appearance.spacing.small
-
-			states: State {
-				when: root.menuOnTop
-
-				AnchorChanges {
-					anchors.bottom: expandBtn.top
-					anchors.top: undefined
-					target: menu
-				}
-			}
-		}
+		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
+		attachTo: expandBtn
+		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
+		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
 	}
 }

Greeter/Components/CustomSplitButtonRow.qml

@@ -8,19 +8,32 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property bool enabled: true
+	property alias buttonAlias: splitButton
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
 	property alias menuItems: splitButton.menuItems
+	property bool shouldBeActive: true
 	property alias type: splitButton.type
 
 	signal selected(item: MenuItem)
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
 	clip: false
-	z: root.expanded ? expandedZ : -1
+	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
 
 	RowLayout {
 		id: row
@@ -36,7 +49,6 @@ Item {
 			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
 			font.pointSize: Appearance.font.size.larger
 			text: root.label
-			z: root.expanded ? root.expandedZ : -1
 		}
 
 		CustomSplitButton {
@@ -44,14 +56,16 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: root.expanded ? root.expandedZ : -1
+			z: 2
 
 			menu.onItemSelected: item => {
 				root.selected(item);
-				splitButton.closeDropdown();
+			// splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.toggleDropdown();
+				// splitButton.toggleDropdown();
+				splitButton.expanded = !splitButton.expanded;
+				console.log(root.z);
 			}
 		}
 	}

Greeter/Components/CustomSwitch.qml

@@ -1,6 +1,6 @@
 import QtQuick
-import QtQuick.Templates
 import QtQuick.Shapes
+import QtQuick.Templates
 import qs.Config
 
 Switch {
@@ -12,38 +12,41 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: 13 + 7 * 2
+		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Appearance.rounding.full
 
 		CustomRect {
-			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
+			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - 10
+			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
 			implicitWidth: nonAnimWidth
 			radius: Appearance.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
 
 			Behavior on implicitWidth {
 				Anim {
+					type: Anim.FastSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
+					type: Anim.FastSpatial
 				}
 			}
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -63,14 +66,14 @@ Switch {
 				}
 				property point end2: {
 					if (root.pressed)
-						return Qt.point(width, height / 2);
+						return Qt.point(width * 0.8, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.85, height * 0.2);
 					return Qt.point(width * 0.85, height * 0.15);
 				}
 				property point start1: {
 					if (root.pressed)
-						return Qt.point(width * 0.1, height / 2);
+						return Qt.point(width * 0.2, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.15, height / 2);
 					return Qt.point(width * 0.15, height * 0.15);
@@ -88,7 +91,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.small * 2
+				height: parent.implicitHeight - Appearance.padding.larger
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -110,11 +113,11 @@ Switch {
 				}
 
 				ShapePath {
-					capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+					capStyle: ShapePath.RoundCap
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
 					strokeWidth: Appearance.font.size.larger * 0.15
 
 					Behavior on strokeColor {
@@ -148,8 +151,7 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: MaterialEasing.expressiveEffectsTime
-		easing.bezierCurve: MaterialEasing.expressiveEffects
-		easing.type: Easing.BezierSpline
+		duration: Appearance.anim.durations.expressiveFastSpatial
+		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
 	}
 }

Greeter/Components/CustomText.qml

@@ -15,6 +15,7 @@ Text {
 	color: DynamicColors.palette.m3onSurface
 	font.family: Appearance.font.family.sans
 	font.pointSize: Appearance.font.size.normal
+	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 

Greeter/Components/Elevation.qml

@@ -1,6 +1,6 @@
-import qs.Config
 import QtQuick
 import QtQuick.Effects
+import qs.Config
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
@@ -13,6 +13,7 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
+			type: Anim.SlowEffects
 		}
 	}
 }

Greeter/Components/HoverIconButton.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+IconButton {
+	id: root
+
+	required property bool shouldBeVisible
+
+	opacity: 0
+	scale: 0
+	visible: root.scale > 0
+
+	Behavior on opacity {
+		Anim {
+			duration: Appearance.anim.durations.small
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+
+	onShouldBeVisibleChanged: {
+		if (root.shouldBeVisible) {
+			root.opacity = 1;
+			root.scale = 1;
+		} else {
+			root.opacity = 0;
+			root.scale = 0;
+		}
+	}
+}

Greeter/Components/IconButton.qml

@@ -41,12 +41,11 @@ CustomRect {
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 	implicitHeight: label.implicitHeight + padding * 2
 	implicitWidth: implicitHeight
-	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
-
 		}
 	}
 
@@ -55,14 +54,14 @@ CustomRect {
 	StateLayer {
 		id: stateLayer
 
-		function onClicked(): void {
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+
+		onClicked: {
 			if (root.toggle)
 				root.internalChecked = !root.internalChecked;
 			root.clicked();
 		}
-
-		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-		disabled: root.disabled
 	}
 
 	MaterialIcon {

Greeter/Components/MarqueeText.qml

@@ -102,6 +102,7 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
+				font.pointSize: elideText.font.pointSize
 				text: elideText.text
 			}
 
@@ -111,6 +112,7 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
+				font.pointSize: elideText.font.pointSize
 				text: t1.text
 				x: t1.width + root.gap
 			}

Greeter/Components/Menu.qml

@@ -2,109 +2,169 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 import qs.Config
+import qs.Drawers
 
-Elevation {
+MouseArea {
 	id: root
 
+	enum Side {
+		Top,
+		Bottom,
+		Left,
+		Right
+	}
+
 	property MenuItem active: items[0] ?? null
+	property int attachSideX: Menu.Right
+	property int attachSideY: Menu.Bottom
+	required property Item attachTo
 	property bool expanded
 	property list<MenuItem> items
+	property real marginX
+	property real marginY
+	property int thisSideX: Menu.Right
+	property int thisSideY: Menu.Top
 
 	signal itemSelected(item: MenuItem)
 
-	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
-	implicitWidth: Math.max(200, column.implicitWidth)
-	level: 2
-	opacity: root.expanded ? 1 : 0
-	radius: Appearance.rounding.normal
-
-	Behavior on implicitHeight {
-		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-		}
+	anchors.fill: parent
+	enabled: expanded
+	layer.enabled: opacity < 1
+	opacity: expanded ? 1 : 0
+	parent: {
+		const win = QsWindow.window;
+		const contentWin = win as Windows;
+		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
 	}
+
 	Behavior on opacity {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			type: Anim.DefaultEffects
 		}
 	}
 
-	CustomClippingRect {
-		anchors.fill: parent
-		color: DynamicColors.palette.m3surfaceContainer
-		radius: parent.radius
+	onClicked: expanded = false
 
-		ColumnLayout {
-			id: column
+	TransformWatcher {
+		id: watcher
 
-			anchors.left: parent.left
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			spacing: 5
+		a: root.parent
+		b: root.attachTo
+	}
 
-			Repeater {
-				model: root.items
+	Elevation {
+		id: menu
 
-				CustomRect {
-					id: item
+		implicitHeight: column.implicitHeight + column.anchors.margins * 2
+		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
+		level: 2
+		radius: Appearance.rounding.medium
+		x: {
+			watcher.transform;
+			const item = root.attachTo;
+			let off = root.attachSideX === Menu.Left ? 0 : item.width;
+			if (root.thisSideX === Menu.Right)
+				off -= width;
+			return item.mapToItem(root.parent, off, 0).x + root.marginX;
+		}
+		y: {
+			watcher.transform;
+			const item = root.attachTo;
+			let off = root.attachSideY === Menu.Top ? 0 : item.height;
+			if (root.thisSideY === Menu.Bottom)
+				off -= height;
+			return item.mapToItem(root.parent, 0, off).y + root.marginY;
+		}
 
-					readonly property bool active: modelData === root.active
-					required property int index
-					required property MenuItem modelData
+		transform: Scale {
+			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
+			yScale: root.expanded ? 1 : 0.1
 
-					Layout.fillWidth: true
-					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
-					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
+			Behavior on yScale {
+				Anim {
+				}
+			}
+		}
+
+		CustomRect {
+			anchors.fill: parent
+			color: DynamicColors.palette.m3surfaceContainerLow
+			radius: parent.radius
+
+			ColumnLayout {
+				id: column
+
+				anchors.fill: parent
+				anchors.margins: Appearance.padding.extraSmall
+				spacing: Appearance.spacing.extraSmall
+
+				Repeater {
+					id: repeater
+
+					model: root.items
 
 					CustomRect {
-						anchors.fill: parent
-						anchors.leftMargin: Appearance.padding.small
-						anchors.rightMargin: Appearance.padding.small
-						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
-						radius: Appearance.rounding.normal - Appearance.padding.small
+						id: item
+
+						readonly property bool active: modelData === root.active
+						required property int index
+						required property MenuItem modelData
+
+						Layout.fillWidth: true
+						color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, active ? 1 : 0)
+						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
+						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
+						radius: Appearance.rounding.small
+
+						Behavior on radius {
+							Anim {
+							}
+						}
 
 						StateLayer {
-							function onClicked(): void {
+							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+
+							onClicked: {
 								root.itemSelected(item.modelData);
 								root.active = item.modelData;
+								item.modelData.clicked();
 								root.expanded = false;
 							}
-
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							disabled: !root.expanded
-						}
-					}
-
-					RowLayout {
-						id: menuOptionRow
-
-						anchors.fill: parent
-						anchors.margins: Appearance.padding.normal
-						spacing: Appearance.spacing.small
-
-						MaterialIcon {
-							Layout.alignment: Qt.AlignVCenter
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant
-							text: item.modelData.icon
 						}
 
-						CustomText {
-							Layout.alignment: Qt.AlignVCenter
-							Layout.fillWidth: true
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							text: item.modelData.text
-						}
+						RowLayout {
+							id: menuOptionRow
 
-						Loader {
-							Layout.alignment: Qt.AlignVCenter
-							active: item.modelData.trailingIcon.length > 0
-							visible: active
+							anchors.fill: parent
+							anchors.margins: Appearance.padding.larger
+							spacing: Appearance.spacing.small
 
-							sourceComponent: MaterialIcon {
-								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-								text: item.modelData.trailingIcon
+							MaterialIcon {
+								Layout.alignment: Qt.AlignVCenter
+								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								text: item.modelData.icon
+							}
+
+							CustomText {
+								Layout.alignment: Qt.AlignVCenter
+								Layout.fillWidth: true
+								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+								text: item.modelData.text
+							}
+
+							Loader {
+								Layout.alignment: Qt.AlignVCenter
+								active: item.modelData.trailingIcon.length > 0
+								asynchronous: true
+								visible: active
+
+								sourceComponent: MaterialIcon {
+									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+									text: item.modelData.trailingIcon
+								}
 							}
 						}
 					}

Greeter/Components/PathViewMenu.qml

@@ -29,6 +29,7 @@ Elevation {
 	level: root.expanded ? 2 : 0
 	radius: itemHeight / 2
 	visible: implicitHeight > 0
+	z: root.expanded ? 100 : 0
 
 	Behavior on implicitHeight {
 		Anim {
@@ -68,6 +69,7 @@ Elevation {
 		anchors.fill: parent
 		color: DynamicColors.palette.m3surfaceContainer
 		radius: parent.radius
+		z: root.z
 
 		// Main visible spinner: normal/outside text color
 		PathView {

Greeter/Components/StateLayer.qml

@@ -1,15 +1,53 @@
-import qs.Config
 import QtQuick
+import QtQuick.Shapes
+import ZShell
+import ZShell.Components
+import qs.Helpers
+import qs.Config
 
 MouseArea {
 	id: root
 
-	property color color: DynamicColors.palette.m3onSurface
+	property alias bottomLeftRadius: base.bottomLeftRadius
+	property alias bottomRightRadius: base.bottomRightRadius
+	property real circleRadius
+	property alias color: base.color
 	property bool disabled
-	property real radius: parent?.radius ?? 0
-	property alias rect: hoverLayer
+	readonly property real endRadius: {
+		const d1 = distSq(0, 0);
+		const d2 = distSq(width, 0);
+		const d3 = distSq(0, height);
+		const d4 = distSq(width, height);
+		return (Math.sqrt(Math.max(d1, d2, d3, d4)) + (shapeMorph ? 24 : 0)) * 1.3;
+	}
+	property real endRadiusAtPress
+	property bool manualPressOverride
+	property real pressX: width / 2
+	property real pressY: height / 2
+	property alias radius: base.radius
+	readonly property alias rect: base
+	property bool shapeMorph
+	property bool showHoverBackground: true
+	property real stateOpacity: containsMouse ? 0.08 : 0
+	property alias topLeftRadius: base.topLeftRadius
+	property alias topRightRadius: base.topRightRadius
 
-	function onClicked(): void {
+	function clamp(r: real): real {
+		return Math.max(0, Math.min(r, width / 2, height / 2));
+	}
+
+	function distSq(x: real, y: real): real {
+		return (pressX - x) ** 2 + (pressY - y) ** 2;
+	}
+
+	function press(x: real, y: real): void {
+		pressX = x;
+		pressY = y;
+		fadeAnim.complete();
+		circleRadius = 0;
+		circle.opacity = 0.1;
+		rippleAnim.restart();
+		endRadiusAtPress = endRadius;
 	}
 
 	anchors.fill: parent
@@ -17,79 +55,146 @@ MouseArea {
 	enabled: !disabled
 	hoverEnabled: true
 
-	onClicked: event => !disabled && onClicked(event)
-	onPressed: event => {
-		if (disabled)
-			return;
-
-		rippleAnim.x = event.x;
-		rippleAnim.y = event.y;
-
-		const dist = (ox, oy) => ox * ox + oy * oy;
-		rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
-
-		rippleAnim.restart();
+	Behavior on stateOpacity {
+		Anim {
+			type: Anim.DefaultEffects
+		}
 	}
 
-	SequentialAnimation {
+	onCircleRadiusChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onClicked: event => !disabled && onClicked(event)
+	onManualPressOverrideChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onPressed: e => press(e.x, e.y)
+	onPressedChanged: {
+		if (!(pressed || manualPressOverride) && !rippleAnim.running && circle.opacity > 0)
+			fadeAnim.start();
+	}
+
+	Anim {
 		id: rippleAnim
 
-		property real radius
-		property real x
-		property real y
-
-		PropertyAction {
-			property: "x"
-			target: ripple
-			value: rippleAnim.x
-		}
-
-		PropertyAction {
-			property: "y"
-			target: ripple
-			value: rippleAnim.y
-		}
-
-		PropertyAction {
-			property: "opacity"
-			target: ripple
-			value: 0.08
-		}
-
-		Anim {
-			easing.bezierCurve: MaterialEasing.standardDecel
-			from: 0
-			properties: "implicitWidth,implicitHeight"
-			target: ripple
-			to: rippleAnim.radius * 2
-		}
-
-		Anim {
-			property: "opacity"
-			target: ripple
-			to: 0
-		}
+		alwaysRunToEnd: true
+		duration: Appearance.anim.durations.expressiveSlowEffects * 2
+		easing.bezierCurve: Appearance.anim.curves.standard
+		property: "circleRadius"
+		target: root
+		to: root.endRadius
 	}
 
-	CustomClippingRect {
-		id: hoverLayer
+	Anim {
+		id: fadeAnim
+
+		property: "opacity"
+		target: circle
+		to: 0
+		type: Anim.SlowEffects
+	}
+
+	CustomRect {
+		id: base
 
 		anchors.fill: parent
-		border.pixelAligned: false
-		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
-		radius: root.radius
+		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
+		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
+		color: DynamicColors.palette.m3onSurface
+		opacity: root.stateOpacity
+		// Pick up radius from parent if it has one (parent can be anything with radius props)
+		// qmllint disable missing-property
+		radius: root.parent?.radius ?? 0
+		topLeftRadius: root.parent?.topLeftRadius ?? radius ?? 0
+		topRightRadius: root.parent?.topRightRadius ?? radius ?? 0
+		// qmllint enable missing-property
+	}
 
-		CustomRect {
-			id: ripple
+	Shape {
+		id: circle
 
-			border.pixelAligned: false
-			color: root.color
-			opacity: 0
-			radius: Appearance.rounding.full
+		anchors.fill: parent
+		opacity: 0
+		preferredRendererType: Shape.CurveRenderer
 
-			transform: Translate {
-				x: -ripple.width / 2
-				y: -ripple.height / 2
+		ShapePath {
+			fillColor: base.color
+			startX: root.clamp(base.topLeftRadius)
+			startY: 0
+			strokeColor: "transparent"
+			strokeWidth: 0
+
+			fillGradient: RadialGradient {
+				centerRadius: root.circleRadius
+				centerX: root.pressX
+				centerY: root.pressY
+				focalX: centerX
+				focalY: centerY
+
+				GradientStop {
+					color: Qt.alpha(base.color, 1)
+					position: 0
+				}
+
+				GradientStop {
+					color: Qt.alpha(base.color, 1)
+					position: ZUtils.clamp(1 - 0.2 * root.endRadius / root.circleRadius, 0.01, 0.99)
+				}
+
+				GradientStop {
+					color: Qt.alpha(base.color, ZUtils.clamp((root.circleRadius / root.endRadius - 0.9) / 0.1, 0, 1))
+					position: 1
+				}
+			}
+
+			PathLine {
+				x: root.width - root.clamp(base.topRightRadius)
+				y: 0
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.topRightRadius)
+				radiusY: root.clamp(base.topRightRadius)
+				relativeX: root.clamp(base.topRightRadius)
+				relativeY: root.clamp(base.topRightRadius)
+			}
+
+			PathLine {
+				x: root.width
+				y: root.height - root.clamp(base.bottomRightRadius)
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.bottomRightRadius)
+				radiusY: root.clamp(base.bottomRightRadius)
+				relativeX: -root.clamp(base.bottomRightRadius)
+				relativeY: root.clamp(base.bottomRightRadius)
+			}
+
+			PathLine {
+				x: root.clamp(base.bottomLeftRadius)
+				y: root.height
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.bottomLeftRadius)
+				radiusY: root.clamp(base.bottomLeftRadius)
+				relativeX: -root.clamp(base.bottomLeftRadius)
+				relativeY: -root.clamp(base.bottomLeftRadius)
+			}
+
+			PathLine {
+				x: 0
+				y: root.clamp(base.topLeftRadius)
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.topLeftRadius)
+				radiusY: root.clamp(base.topLeftRadius)
+				x: root.clamp(base.topLeftRadius)
+				y: 0
 			}
 		}
 	}